边界与变形的边缘

Question

也许我的标题是不好的描述我想问的事情，我需要特定的边框，我没有任何想法如何做到这一点。

http://prntscr.com/eaqmcs

 <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

您可以使用倾斜变形达到这种效果。 因为你给的形状就像是只有底部和右侧半径

.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，达到的效果是一个扭曲的div：

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