記載のHTML+CSSでは、(:afterの後の中括弧を補ったとしても)背景色のついたdivしか見えないのですが、それが意図した「結果」なのでしょうか。
https://codepen.io/anon/pen/JzjOQd
html
1<div class="why"> 2</div>
css
1.why { 2 position: relative; 3 padding: 40px 0; 4 text-align: center; 5 background-color: #ebb94d; 6 color: #fff; 7} 8 9* { 10 box-sizing: border-box; 11} 12 13div { 14 display: block; 15 16.why:after { 17 content: " "; 18 height: 0; 19 position: absolute; 20 width: 0; 21 border: 25px solid transparent; 22 border-top-color: #ebb94d; 23 top: 100%; 24 left: 50%; 25 margin-left: -25px; 26} 27 28:after { 29 box-sizing: border-box;
- ここに出てくるcssのプロパティーはすべて理解しているつもりです。結果のようになる過程が分かりません。教えてください。
命題が途中できれてるし、「結果」は何を示しているのかもわかりません
どれが「結果」か書いていないですし、CSSの内容が正しく無い(閉じていない)ので、ここに書かれている内容から何を目的としているのかわかりません。
結果のようになっていないと思うんですが。
疑似要素ちゃんとつくれてますか?
今のままだとただのDIVです
maisumakunさん
divも閉じかっこないですね。。
質問者さん
すべて理解していて「過程がわからない」とは矛盾していますね。
せめて構文ミスのないコードを提示してください。
そういえばdivってそもそもブロック要素だからdisplay: block;の指定ってほぼ意味ないですね。意図が良く分からないコードなのでそもそも過程が分からないとか言っている次元ではないと思います。
ここ最近、何人かのユーザーからその isara ってサイトに関連するCSSの質問が出ていますね。
来年度新卒のインターンの研修とかなのかしら?
https://isara.life/を元に模写コーディングしている、3角形の描画部分(疑似要素で3角形を描画できる仕組み)がわからない といった質問内容にしてほしいです。
出典サイトの該当部分を見ましたがデベロッパーツール出てくるCSSをほぼそのまま貼り付けてるんですかね。
変なところに割り込んでたりuser agent stylesheetでの記載までわざわざ書いてますが…。
なぜ3角形が描画できるのか については図説付きで書いてる記事があったので紹介しておきます。紹介だけなので回答ではなくこちらで。
https://liginc.co.jp/web/html-css/html/164641
あなたの回答
tips
プレビュー