結果を表示する
元にもどす
<html> <style> .ボックス{position:relative; top:200px; left:50px; height:100px; width:100px; background-color:#456789; text-align:center; color:#ffffff; box-sizing:border-box;} .アタッチメント{position:absolute; top:90px; left:40px; height:26px; width:120px; background-color:#aaaaaa; text-align:center; color:#000000; transform:rotate(45deg);} .アタッチメント::before{content:""; position:absolute; left:0; border-top:10px solid #ff00ff; border-left:10px solid transparent; border-right:10px solid transparent; bottom:-10px;} .アタッチメント::after{content:""; position:absolute; right:0; border-top:10px solid #00ff00; border-left:10px solid transparent; border-right:10px solid transparent; bottom:-10px;} </style> <div class="ボックス">ボックス <div class="アタッチメント">アタッチメント</div> </div> </html>