CSS를 사용하여 div의 한면을 만드는 방법은 무엇입니까?

Question

는이 같은 뾰족한 버튼을 만들려고 해요 :

내가 가로 테두리 - 증가 생각 :

는

지금까지, 나는 이것을 달성하기 만 할 수 있었다 반지름은 날카롭게 만들지 만, 모든 것이 둥글기를 길게 만듭니다.

HTML

<a class="button">Back</a> 

CSS 당신은 그 지정된 각 코너에 쿼터 원형 모양을 할당으로 border-radius를 사용하지 않으려는

.button { 
    display: inline-block; 
    height: 3em; 
    padding: 0 0.7em 0 1.4em; 
    border: 0.1em solid black; 
    border-radius: 3em 0.4em 0.4em 3em/1.5em 0.4em 0.4em 1.5em; 
    background: -moz-linear-gradient(
     top, 
     #fff, 
     #ccc 
    ); 
} 

Answer 1

더 많은 생각을 해본 결과 더욱 세련된 스타일링과 HTML 요소 한 개만 사용할 수있는보다 우아한 솔루션입니다. 이 방법을 사용하면 개념에서 완전히 결과를 얻을 수 있습니다.

HTML

a.button { 
    text-decoration:none; 
    color:#111; 
    text-shadow:0 1px 0 #fff; 
    font-weight:bold; 
    padding:10px 10px; 
    font-size:14px; 
    border-radius:0 8px 8px 0; 
    -webkit-border-radius:0 8px 8px 0; 
    float:left; 
    margin-left:30px; 
    margin-top:20px; 
    position:relative; 
    font-family:verdana; 
    color:#3b3d3c; 
    border:1px solid #666; 
    border-left:0; 
    background: -moz-linear-gradient(top , #eee 0%,#bbb 100%); 
    background: -webkit-linear-gradient(top , #eee 0%,#bbb 100%); 
} 
a.button:after { 
    content:""; 
    width:25px; 
    height:25px; 
    background: -moz-linear-gradient(left top , #eee 0%,#bbb 100%); 
    background: -webkit-linear-gradient(left top , #eee 0%,#bbb 100%); 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    display:block; 
    position:absolute; 
    top:5px; 
    left:-14px; 
    z-index:-1; 
    border:1px solid #666; 
} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
a.button:after{ 
    border-left:0; 
    left:-13px; 
} 

마지막 규칙은 그렇지 약간 다르게 결과를 렌더링 크롬입니다

<a href="#" class="button">Back</a> 

CSS.

희망이 도움이됩니다.

Answer 2

. 대신이 사이트에서 설명한대로 특정 border-width 속성을 사용하여 해킹 할 수 있습니다. http://www.howtocreate.co.uk/tutorials/css/slopes

그러나 나는 잘못된 방식으로 문제를 해결하고 있다고 느낍니다. iOS 스타일의 뒤로 버튼이 iPhone 용 웹 스타일 시트에 구현되는 방법 인 배경 이미지를 사용하면 가장 잘 할 수 있습니다. 해상도가 독립적 인 무언가가 필요하다면 이제는 페널티없이 SVG를 사용할 수 있습니다.

Answer 3

앵커 태그에 2 개의 요소를 나란히 배치하여 이러한 효과를 만들 수 있습니다. 의도 한대로는 가장 세련된 솔루션입니다, 그러나 확실히 컨셉 아트와 같은 외모와 기능 경우

<style type="text/css"> 
.arrow-left { 
     width:0; 
     height:0; 
     border-top:30px solid transparent; 
     border-bottom:30px solid transparent; 
     border-right:30px solid orange; 
     float:left; 
} 
.button { 
     float:left; 
     height:60px; 
     background:orange; 
     width:50px; 
     line-height:60px; 
     font-weight:bold; 
     border-top-right-radius:8px; 
     border-bottom-right-radius:8px; 
} 
</style> 

<a href='#'><div class="arrow-left"></div><div class="button">Back</div></a> 

는 잘 모르겠어요.