<分区>
如何使用 CSS3 制作这样的坡度？ <强> FIDDLE
HTML
<div class="slope">
Hello
</div>
CSS
.slope{
width:500px;
height:100px;
background:#0093f7;
text-align:center;
font-size:26px;
color:#fff;
vertical-align:middle;
}
标签 css css-shapes
<分区>
如何使用 CSS3 制作这样的坡度？ <强> FIDDLE
HTML
<div class="slope">
Hello
</div>
CSS
.slope{
width:500px;
height:100px;
background:#0093f7;
text-align:center;
font-size:26px;
color:#fff;
vertical-align:middle;
}
最佳答案
这样就无需知道主 DIV 的宽度。知道高度还是有必要的...
.slope{
width:500px;
height:100px;
background:#0093f7;
text-align:center;
font-size:26px;
color:#fff;
vertical-align:middle;
overflow: visible;
position: relative; <--- this is important
}
.slope:after {
content: "";
position: absolute; <--- works with the above, such that positioning is relative to the main DIV
display: block;
right: -100px;
top: 0px;
width: 0px;
height: 0px;
border-top: solid 100px #0093f7;
border-right: solid 100px transparent;
}
fiddle : https://jsfiddle.net/vh1mk5yx/5/
关于css - 我怎样才能做坡度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31078763/