どうも7noteです。リボン・・・ではなくリボン結び（蝶々結び）を作ってみました。
一般的にWEB業界で「リボン」と言われると以下のようなデザインが一般的かと思います。
でも単に「リボン」って言われたらやっぱ「ハ〇ーキティ」が耳につけている赤いリボンのイメージが強い。
というわけで、リボン（蝶々結びのリボン）を作ってみました。
好きな大きさに調整しやすくまとめていますので、★のついているコメントの箇所だけ調整してお使いください。
完成例
ソース
index.html
<divclass="ribon"><divclass="wakka left"></div><divclass="center"><span></span></div><divclass="wakka right"></div><divclass="ashi left"></div><divclass="ashi right"></div></div>style.css
/*--------リボン--------*/.ribon{width:100px;/* ★リボンの大きさ */margin-top:10px;/* ★位置調整 */position:relative;}/*--------真ん中の結び目--------*/.center{width:10%;margin:0auto;}.centerspan{display:block;width:100%;padding-top:100%;background-color:#DE0024;/* ▲リボンの色 */border:2pxsolid#683733;/* ■線の色 */box-sizing:border-box;}/*--------輪っかの部分--------*/.wakka{width:45%;height:100%;position:absolute;top:0;}.wakka.left{left:0;}.wakka.right{right:0;}.wakka::before{content:'';width:100%;height:180%;background-color:#DE0024;/* ▲リボンの色 */border:2pxsolid#683733;/* ■線の色 */position:absolute;bottom:0;box-sizing:border-box;}.wakka.left::before{border-radius:30%60%010%/30%60%010%;left:2px;}.wakka.right::before{border-radius:60%30%10%0/60%30%10%0;right:2px;}.wakka::after{content:'';width:100%;padding-top:10%;background-color:#DE0024;/* ▲リボンの色 */border:2pxsolid#683733;/* ■線の色 */border-radius:100%;position:absolute;bottom:-2px;box-sizing:border-box;}.wakka.left::after{left:2px;}.wakka.right::after{right:2px;}/*--------足の部分--------*/.ashi{width:50%;padding-top:10%;/* ★リボン足、太さ調整 */background:#DE0024;/* ▲リボンの色 */border:2pxsolid#683733;/* ■線の色 */position:absolute;right:0;bottom:0;transform-origin:0100%;transform:rotate(45deg);z-index:-1;}.ashi.left{left:0;transform-origin:100%100%;transform:rotate(-45deg);}.ashi.right{right:0;transform-origin:0100%;transform:rotate(45deg);}.ashi::before{content:'';display:inline-block;width:0;height:0;position:absolute;top:-2px;width:0;height:0;border-style:solid;}.ashi.left::before{left:0px;border-width:7px07px7px;/* ★リボン端、三角の大きさ調整 */border-color:transparenttransparenttransparent#683733;/* ■線の色 */}.ashi.right::before{right:0px;border-width:7px7px7px0;/* ★リボン端、三角の大きさ調整 */border-color:transparent#683733transparenttransparent;/* ■線の色 */}.ashi::after{content:'';display:inline-block;width:0;height:0;position:absolute;top:-2px;width:0;height:0;border-style:solid;}.ashi.left::after{left:-3px;border-width:7px07px7px;/* ★リボン端、三角の大きさ調整 */border-color:transparenttransparenttransparent#fff;}.ashi.right::after{right:-3px;border-width:7px7px7px0;/* ★リボン端、三角の大きさ調整 */border-color:transparent#ffftransparenttransparent;}感想
自分的にはなかなか上出来かなと思います。.ashiをなくせば足ナシにもできます。
色の調整は▲と■のコメントが付いている部分でできます。
アニメーションとUIを組み合わせて、リボンの足を引っ張ったらほどける仕組みも作りたい。
CSSでどこまでやれるのか・・・
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ