边界与变形的边缘
问题描述:
也许我的标题是不好的描述我想问的事情,我需要特定的边框,我没有任何想法如何做到这一点。边界与变形的边缘
<div class="row first-column">
<h2>100%</h2>
<h1 class="col-md-12">Monetize your Mobile <span>Traffic</span></h1>
<p class="col-md-5 offset-md-4 pull-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ducimus veniam earum! Architecto omnis ex nobis nemo enim culpa,
natus deleniti assumenda accusantium inventore laboriosam soluta perferendis, corporis facilis sunt?
</p>
</div>
这是我的CSS
.first-column{
margin-left: 18%;
margin-right: 18%;
margin-top: -5%;
}
.first-column h1{
text-align: center;
letter-spacing: 2px;
font-weight: bold;
border-bottom: 1px solid #acacac;
}
.first-column h2{
color: #fff;
margin-left: 13%;
font-weight: bold;
font-size: 57px;
}
答
您可以使用倾斜变形达到这种效果。 因为你给的形状就像是只有底部和右侧半径
.test{
width: 150px;
height: 10px;
margin-left: 100px;
border-bottom: 2px solid red;
border-right: 4px solid red;
transform: skewX(-60deg);
border-bottom-right-radius: 2px;
}
<div class=test></div>
非常感谢你,我真的很感激它 –
很酷..没问题..你也可以看看svg更好的这些东西 –