블록 div의 모서리를 어떻게 베벨로 만들까요?

나는 다음과 같은 HTML 문서를 한 :블록 div의 모서리를 어떻게 베벨로 만들까요?

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Тег DIV</title> 
     <style type="text/css"> 
      .block1 { 
       width: 200px; 
       background: #ccc; 
       padding: 5px; 
       padding-right: 20px; 
       border: solid 1px black; 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="block1">Text Content</div> 
    </body> 
</html>

어떻게 다음 얻을 수있는 스타일을 설명합니까? enter image description here

출처

2013-05-25 sribin

을 구조와 이미지 .. – Sakthivel

은 CSS4 border-corner-shape 재산 is in danger! 및 it's not implemented까지, 이것은 (더 사용에 대한 무료 border 속성을 유지하기 위해) CSS3의 변환을 사용하여 수행 할 수 있습니다 :

HTML :

<div class="box"> 
    Text Content 
</div>

CSS :

.box { 
    width: 200px; 
    height: 35px; 
    line-height: 35px; 
    padding: 0 5px; 
    background-color: #ccc; 
    padding-right: 20px; 
    border: solid 1px black; 
    border-right: 0; 
    position: relative; 
} 

.box:after { 
    content: ""; 
    display: block; 
    background-color: #ccc; 
    border: solid 1px black; 
    border-left: 0; 
    width: 35px; 
    height: 35px; 
    position: absolute; 
    z-index: -1; 
    top: -1px; /* pull it up because of 1px border */ 
    right: -17.5px; /* 35px/2 */ 
    transform: skew(-45deg); 
    -o-transform: skew(-45deg); 
    -moz-transform: skew(-45deg); 
    -webkit-transform: skew(-45deg); 
}

여기에 JSBin Demo입니다.

참고 : 예에서 또 다른 div 위 당신이 그것을 사용하는 것이 좋습니다 CSS3 선언을 사용하지 않고 구현 box2의 class 속성이있다, 그렇지 않으면 표를 사용하여) naivists 말했듯이 당신이 삼각형을 생성 할 수 있습니다

출처

2013-05-25 11:11:47

** 참고 : [border-corner-shape]은 [corner-shape'] (http://dev.w3.org/csswg/css-backgrounds-4/#corner-shaping) 속성으로 [ CSS 배경 및 테두리 모듈 수준 4] (http://dev.w3.org/csswg/css-backgrounds-4). –

대부분의 경우 가능한 경계 트릭을 사용하여 수행 할 수 있습니다. 웹에 "삼각형 생성기"가 하나 있습니다 (예 : this)

출처

2013-05-25 10:01:46 naivists

+1 이것이 최선의 선택입니다. 이미지에서 외곽선을 만들기 위해 추가로 'outline : solid 1px # 000;'을 사용할 수 있습니다. 심지어 삼각형 주위. – Bart

여기에 Solution입니다.

CSS의 및 HTML :

ul { 
 
     position: relative; 
 
     overflow: hidden; 
 
     font: 14px Arial; 
 
     margin: 0; 
 
     padding: 0; 
 
     list-style: none; 
 
     text-align: center; 
 
    } 
 
    ul:before { 
 
     content: ""; 
 
     position: absolute; 
 
     z-index: -1; 
 
     left: 124px; 
 
     margin-left: -120px; 
 
     width: 0; 
 
     border-left: 0 solid transparent; 
 
     border-right: 230px solid transparent; 
 
     border-top: 179px solid #CCCCCC; 
 
    } 
 
    li { 
 
     height: 3.8em; 
 
     line-height: 3em; 
 
     position: relative; 
 
     margin-left: -562px; 
 
    } 
 
    li:after, 
 
    li:before { 
 
     content: ""; 
 
     display: block; 
 
     height: 0.4em; 
 
     background: #fff; 
 
     width: 100%; 
 
    }

<ul> 
 
    <li>Text Content</li> 
 
</ul>

당신이 원하는 출력을 얻을 수있는 border-width 속성을 사용합니다.

희망이 도움이됩니다.

출처

2013-05-25 10:38:59 Nitesh

나는이 같은 문서를 설명하면 : 나는 당신이 필요로하는 거의받을 것을

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Тег DIV</title> 
    <style type="text/css"> 
    .block1 { 
    width: 300px; 
    height: 0px; 
    border-style: solid; 
    border-width: 200px 200px 0 0; 
    border-color: #f200ff transparent transparent transparent; 
    } 
    </style> 
</head> 
<body> 
    <div class="block1">Text Content</div> 
</body> 
</html>

,하지만 텍스트가 그림에없는 이유를 이해하지?

출처

2013-05-25 10:54:33 sribin

블록 div의 모서리를 어떻게 베벨로 만들까요?

답변

관련 문제