3

以下の例のようにdivwith でカットアウトを作成する方法はありますか?CSS3

ここに画像の説明を入力

私がやろうとしているのはdivs、画像として 2 の間にカットアウトを作成することです。切り出さdivれているのdivは一番下の で、background-color、drop shadow、 がinset shadowありborder styleます。

私がやりたいことはCSS3、 の切り欠きの中にボタンを配置することdivです。

4

2 に答える 2

6

編集 - 新しいソリューション

を使用するとradial-gradient、カットアウト div で新しいレベルの品質を実現できます。Running Demo

https://stackoverflow.com/a/18853833/1654265で詳細を読む

古いソリューション

あなたのような芸術的な背景ではなく、均質な背景でそれを行うことができます. たとえば Photoshop になるなど、CSS には決してできないことがあります。

ただし、境界線、負のマージン、および z-index を使用してトリックを実行できます。

デモ: 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
}
于 2013-02-07T09:34:45.543 に答える
0

デザインを単純化する必要があるかもしれませんが、グラデーションと疑似要素を使用して同様の効果が可能です。

デモ

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);}
于 2012-10-02T20:02:38.443 に答える