邊界與變形的邊緣

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