그라디언트가있는 접이식 리본 헤딩을 만드는 방법은 무엇입니까?

Question

여기 가지이 튜토리얼과 같이, 랩 어라운드 효과와 제목을 만들기 위해 찾고 있어요 :

http://code.tutsplus.com/tutorials/quick-tip-practical-css-shapes--net-11749

나는이 학교 웹 사이트처럼,보다 더 둥근 모양으로 가지 원하는 제외 :

http://www.mowbray-p.schools.nsw.edu.au/home

하지만 당신이 이미지의 말할 수 및 배너의 픽셀 화에 의해 확대. 내가 궁금한 건 그래서

, 어떻게 실제 코딩이 (를 포함하여 그라데이션을) 만들려면 어떻게해야합니까?

아이디어/도움 감사합니다! :)

편집 : 코드는 HTML 및 CSS로 제한되지 않습니다.

Answer 1

그래, 내 솔루션이 최고가 아니고 개선의 여지가 있지만 작동합니다. CSS 만 사용하여 언급 한 사이트에서이 리본 메뉴를 다시 만들었습니다. 상단 리본과 하단 리본은 각각 absolute이며, 각각은 :before 셀렉터를 사용하여 그라디언트를 삽입하고 나머지는 각 요소에 대해 border-radius을 설정하는 것입니다. 너무 화려하거나 너무 복잡하지는 않습니다.

https://jsfiddle.net/ny46og69/

Answer 2

는 사실은 간단합니다. 당신은 ::before들 사용하려는 ::after의 IT 순수 CSS 만들 수있는 매우 어려운 작업이다

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    background-color: #09f; 
 
} 
 

 
nav { 
 
    width:200px; 
 
    height:80px; 
 
    position:relative; 
 
    margin:50px; 
 
} 
 

 
nav > .nav-container { 
 
    width:100%; 
 
    height:80px; 
 
    background-color:#CCEBFF; 
 
    position:relative; 
 
    z-index:2; 
 
    border-radius: 15px 15px 0 0; 
 
} 
 

 
nav > .nav-container > div { 
 
    position:absolute; 
 
    top:32px; 
 
    width:100%; 
 
    height:36px; 
 
    background-color: #fff; 
 
    padding:10px; 
 
} 
 

 
nav::before, 
 
nav::after{ 
 
    content: " "; 
 
    position:absolute; 
 
    border-radius:15px; 
 
} 
 

 
nav::before { 
 
    top:0px; 
 
    left:-22px; 
 
    width:44px; 
 
    height:68px; 
 
    background-color:#fff; 
 
} 
 

 
nav::after { 
 
    top:2px; 
 
    left:-20px; 
 
    width:40px; 
 
    height:30px; 
 
    background: #dddddd; 
 
    background: -moz-linear-gradient(top, #dddddd 0%, #999999 100%); 
 
    background: -webkit-linear-gradient(top, #dddddd 0%,#999999 100%); 
 
    background: linear-gradient(to bottom, #dddddd 0%,#999999 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#999999',GradientType=0); 
 
}

<nav> 
 
    <div class="nav-container"> 
 
    <div> 
 
     All your items 
 
    </div> 
 
    </div> 
 
</nav>