기울어 진 에지 버튼

Question

나는 다음과 같이 버튼을 구축하기 위해 노력하고있어. 이것을 달성하고 가변 높이를 유지할 수있는 방법이 있습니까?

바이올린 : http://jsfiddle.net/AaP47/2/

Answer 1

이 경우에 왜곡 된 사업부를 사용할 수 있습니다. 여기서 유일한 문제는 스큐로 인해 버튼이 커질수록 약간 커집니다. 1 줄 또는 2 줄만 다루는 경우에는 문제가되지 않을 수도 있습니다. 그들은 매우 높은 얻을 경우 눈에 띄게 정확히 일치하지 물건을 발생할 수 있습니다

http://jsfiddle.net/AaP47/3/

.button.triangle:after { 
    content: ""; 
    background-color: red; 
    display: block; 
    height: 100%; 
    position: absolute; 
    right: -30px; 
    top: 0; 
    width: 60px; 
    transform: skewX(-10deg); 
} 

이것은 또한 완벽하게 확장되지 않습니다. 그에 따라 지원하고 조정해야하는 가장 큰 높이를 결정해야합니다. 지원해야 할 키가 클수록 비뚤어진 광고 단위가 더 넓어야합니다. (빨간색 제외)

결과 : 나는 다른 방향에서 재미 땜질을했고, 당신은 분명히 이미 대답을 얻었다하더라도 옵션 개념을 제공해서 http://jsfiddle.net/AaP47/4/

Answer 2

;

a { 
    padding-right: 20px; 
    padding-left: 20px; 
    text-decoration: none; 
    color: white; 
    font-weight: bold; 
    display: inline-block;  
    border-right: 30px solid transparent; 
    border-top: 50px solid #4c4c4c;  
    height: 0; 
    line-height: 20px; 
} 
a p {margin-top: -45px;} 

및;

<a href="#"> 
    <p>this is a triangle button<br/> 
     with multiple lines!</p> 
</a> 

jfiddle : http://jsfiddle.net/AaP47/6/

건배!