변형 된 테두리가있는 테두리

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> 

이

http://prntscr.com/eaqmcs

는 스큐 변환을 사용하여이 효과를 얻을 수 있습니다 내 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

입니다. 당신이 준 모양 당신은 효과를 달성하기 위해, h1 span:after처럼, 의사 요소를 사용할 수

.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

만 하단과 오른쪽 반경와 함께 연구 DIV처럼 같이

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