如何用css在div中创建这种效果？ enter image description here个
我在之前和之后都这样做过，但我不太擅长使用这些标签: enter image description here个
如果我问错了问题，我很抱歉，但你能帮我吗？
如何用css在div中创建这种效果？ enter image description here个
我在之前和之后都这样做过，但我不太擅长使用这些标签: enter image description here个
如果我问错了问题，我很抱歉，但你能帮我吗？
以下是一个用css编写的文件的工作版本.注意--我将元素设置为button，而不是div，因为通常这些类型的内容是由用户点击的.维护可访问性标准是关键，并应决定您 Select 的标记类型(HTML).
屏幕阅读器使用aria-label来共享对用户正在交互的元素的更好描述.例如，如果没有它，盲人用户只能知道这是一个文本为"PDF"的按钮.
Css非常简单，但如果有什么需要进一步解释的，请让我知道.
.file {
position: relative;
min-width: 4rem;
min-height: 5rem;
padding: 1em 0.5em;
margin: 2em auto;
color: #fff;
background: #97C02F;
overflow: hidden;
display: inline-flex;
border-radius: 5px 0 5px 5px;
outline: none;
border: none;
cursor: pointer;
}
.file:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #658E15 #658E15;
background: #658E15;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);
border-width: 16px;
border-color: #fff #fff transparent transparent;
border-radius: 0 0 0 5px;
}
.file span {
font-family: helvetica, sans-serif;
font-size: 0.8rem;
position: absolute;
bottom: 0.55rem;
left: 50%;
transform: translateX(-50%);
}<button type="button" class="file" aria-label="click to view PDF file">
<span>PDF</span>
</button>