我是这样尝试的:
HTML
<div class="header-bottom">
<div class="blue-rectangle">
<p>sadasdasdasd</p>
</div>
<div class="blue-rectangle">
<p>dsasdasdasda</p>
</div>
</div>
CSS
.header-bottom{
position: absolute;
right:13%;
bottom:5%;
}
.blue-rectangle {
background-color: rgba(3,78,136,0.7);
padding: 10px 20px 10px 200px;
margin-bottom: 20px;
}
.blue-rectangle p{
color:white;
text-transform: uppercase;
font-size:18px;
}
我尝试添加 transform:skew 但它同时向右、向左和文本本身倾斜。
最佳答案
.shape{
text-align:center;
background-color:rgba(3,78,136,0.7);
width:200px;
height:60px;
line-height:60px;
color:white;
margin:20px auto;
position:relative;
}
.shape:before{
content:"";
width:0px;
height:0px;
border-top:60px solid rgba(3,78,136,0.7);
border-left:60px solid transparent;
position:absolute;
right:100%;
top:0px;
}
<div class="shape">
something something
</div>
<div class="shape">
something else
</div>
关于里面有文字的CSS形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31669656/