• 쇼핑몰
  • 커뮤니티
  • 북마크

CSS

CSS 다각형 도형 만들기

익명
2020.10.29 08:49 5,254 0
  • - 첨부파일 : multi_polyline.png (1.3K) - 다운로드

본문

STYLE


.item {
       display: inline-block;
       padding: 15px;
       padding-left: 25px;

       /*default styles*/
       background-color: green;
       position: relative;
     }  


    .item:before,
.item:after {
         content: "";
         height: 0;
         width: 0;
         border-width: 15px 0 15px  10px;
         border-style: solid;

         position: absolute;
         left: 100%;
         top: 0;
       }


.item:before {
             border-color: transparent transparent transparent white;
           left: 0;  
         }


.item:after {
           border-color: transparent transparent transparent green;  
         }

html

<pre><code>

<div class="wizard">

     <a class="item">

     </a>

</div>

</code></pre>

댓글목록 0

등록된 댓글이 없습니다.