0
divタグがあり、divボックスに1つの三角形を追加しました。 2番目の三角形を追加するにはどうすればよいですか?divタグに2つのボーダー付き三角形を追加する方法
私は2つの三角形を持ちたいと思います。最高のものと最悪のものはほとんどのブラウザで動作します。ここで
.arrow_box {
top: 40px;
position: relative;
background: #ffffff;
border: 1px solid #719ECE;
width: 200px;
height: 22px;
border-radius: 3px;
-webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
-moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);
filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
}
.arrow_box:after,
.arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 19px;
left: 70%;
margin-left: -19px;
}
.arrow_box:before {
border-color: rgba(113, 158, 206, 0);
border-bottom-color: #719ECE;
border-width: 20px;
left: 70%;
margin-left: -20px;
}
<div id="nicebox" class="arrow_box">
<span class="pull-left">Best </span>
<span class="pull-right">Worst</span>
</div>
ありがとうございます。私の例に似た背景色の矢印を作ることは可能ですか? – user244394