こんにちはみんなでこれら2つの境界を作るためにどのように、私はブロックのために、それらの境界をやろうとしています:後:擬似要素、ボタンの同じことの前に、私はそれに引っかかっ私はそれが何とか境界線の幅で行われる必要がありますね、それで私を助けることができる?
Q
擬似要素
0
A
答えて
2
共有画像のようなものを作成しました。あなたはこれまでに何をした?
.outer-section{
background:#fdefe0;
width:200px;
height:400px;
border: 1px solid #c7bcaf;
border-radius:8px;
position:relative;
margin:30px;
}
.outer-section:before {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 5px solid #fdefe0;
content: "";
top: -4px;
z-index: 2;
}
.outer-section:after {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 5px solid #c7bcaf;
content: "";
top: -5px;
z-index: 1;
}
.inner-section {
background: transparent;
height: 100%;
position: relative;
}
.inner-section:before {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 5px solid #fdefe0;
content: "";
bottom: 1px;
z-index: 2;
}
.inner-section:after {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 5px solid #c7bcaf;
content: "";
bottom: 0;
z-index: 1;
}
.white-bg {
background: #fff;
height: 350px;
margin: 5px;
}
.button-section {
background: #e88d1c;
position: relative;
margin: 5px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
padding: 10px 0;
}
.button-section:before {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 86px solid transparent;
border-top: 5px solid #e88d1c;
content: "";
bottom: -5px;
z-index: 2;
}
.button-innner {
background: #fff;
height: 10px;
width: 40%;
margin: auto;
}
<div class="outer-section">
<div class="inner-section">
<div class="white-bg">
</div>
<div class="button-section">
<div class="button-innner">
</div>
</div>
</div>
</div>
+0
こんにちは、solution.Btwのおかげでそれは同様に応答することは可能ですか? –
+0
はここで更新されたフィドルです。私は応答する私はパーセント形式で値を与えているhttps://fiddle.jshell.net/de23bsyy/ –
関連する問題
- 1. 擬似要素は
- 2. FadeOut擬似要素
- 3. 擬似要素と画像
- 4. :擬似要素はサファリ
- 5. jQueryと擬似要素
- 6. 擬似要素のセンタリング
- 7. グローブブラケット擬似要素CSS
- 8. 未知の擬似要素または擬似クラス:: selection [選択]
- 9. CSS擬似要素のサイズの問題
- 10. mootoolsで擬似要素を選択
- 11. 擬似要素の3D変換
- 12. リスト擬似要素の後には、
- 13. webkit-tap-highlight-color on擬似後要素
- 14. アニメーション用の擬似要素スタッキング
- 15. Chromeの擬似要素の前に
- 16. 擬似要素:垂直方向のインラインアラインメント
- 17. 上の擬似要素のスタックの親
- 18. 位置擬似要素の後に
- 19. input.submitにある擬似要素
- 20. CSS3:入力後の擬似要素
- 21. CSS :: ::擬似要素の後ろ
- 22. CSS擬似要素の混乱
- 23. 要素のz-インデックスへの影響:before /:after擬似要素
- 24. 角型2擬似要素のスタイル付け(指示要素?)
- 25. 擬似要素は要素の一番上にあります。
- 26. IE10: 'visibility:hidden'要素の擬似要素の前に 'visibility:visible' on
- 27. 擬似要素は非擬似要素の高さをどのように検出できますか?
- 28. 擬似要素のCSSは親要素に影響を与えます
- 29. 画像を送信:before要素の背後にある擬似要素
- 30. スクロールした要素内に擬似要素を固定する方法は?
...これはuのために働くことを願っていますかあなたのコードを私たちに教えてください。 –