Question

也许我的标题不是关于我想问的东西的好描述，我需要特定的边框，我不知道该怎么做。

        <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;
}

Answer 1

您可以使用偏斜变换来实现此效果。因为你给出的形状就像一个只有半径和右半径的倾斜div

.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>

Answer 2

您可以使用伪元素（如h1 span:after）来实现效果：

http://codepen.io/Sixl/pen/jyjrmz

边界与变形边缘

2 个答案: