div에 컷 아웃을 작성하는 방법은 아래 예제와 같이 CSS3입니까? 내가 할 노력하고있어div에서 CSS3 곡선 컷 아웃?
는 이미지로 divs 2 사이에 컷 아웃을 만드는 것입니다. 잘라내는 실제 div은 하단에 div이며, background-color, drop shadow, inset shadow 및 border style입니다.
의 컷 아웃 안에 CSS3 버튼을 넣고 싶습니다.
Demo 편집 - 새로운 솔루션 radial-gradient로,이 컷 아웃 된 div 품질의 새로운 수준을 달성 할 수
더 https://stackoverflow.com/a/18853833/1654265
에 읽기 ,451,515,OLD 솔루션
당신은 아닌 같은 예술적인 하나와 더불어, homogeneus 배경으로 그것을 할 수 있습니다. CSS가 결코하지 않을 일들이 있습니다. 예를 들어 Photoshop이 될 수 있습니다.
그러나 경계, 음수 여백 및 z- 색인을 사용하여 트릭을 수행 할 수 있습니다.
데모 : http://jsfiddle.net/cB8Qq/
HTML
<body>
<div class="container">
<div class="rounded">bla bla bla</div>
<div class="digged"> <br/><br/>or yada yada yada </div>
</div>
</body>
CSS
.container{
text-align: center;
background: #ddd;
}
.rounded{
margin: 0 auto;
border-radius: 50px;
width: 200px;
height: 30px;
background: silver;
padding: 10px;
border: 10px solid #ddd;
z-index: 1;
position: relative;
}
.digged{
margin: 0 auto;
background: silver;
width: 400px;
height: 100px;
margin-top: -30px
}
+1, 멋진 솔루션! –
고맙습니다. P.S : 프로필에 Nice Ascii Art가 있지만 Java hello printing에 'n'을 추가해야합니다 ^^ –
감사합니다! 물론, 그것은 println입니다. 고쳤다. :-) –
디자인을 단순화해야 할 수도 있지만 그래디언트와 유사 요소를 사용하면 비슷한 효과를 얻을 수 있습니다.
body{background: salmon;}
.main {background:gray; width:300px; height:200px; position: relative; margin-top:20px;}
.main:after, .main:before{content:''; width: 50px; height: 20px; background: inherit; position: absolute; }
.main:after{ top:-20px; left:0;}
.main:before{ top:-20px; right:0;}
.phone{width:175px; height:40px; background: gray; margin-left:62.5px; border-radius: 50px; text-align: center; line-height: 40px; position: relative;}
.phone:after,.phone:before{content:''; width:20px; height:20px; background:red; position: absolute;}
.phone:before{bottom:-20px; left:-12px; background: -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, gray 15px);}
.phone:after{bottom:-20px; left:168px; background: -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, gray 15px);}
이미지가 나에게 404 ?? – geekman
는 지금 고쳐야한다 – dennisterrey
그것은 css를 사용하여 끝날 수 있는가 ??? 나는 그것을 의심한다. – geekman