1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<style> .box-left, .box-center, .box-right{ width: 200px; height: 30px; font-size:18px; line-height: 30px; color:#fff; text-align: center; background: rgb(0,160,178); border-radius: 5px; position: relative; } .box-left:before{ content: ''; width: 0; height: 0; border-width: 30px 0px 0px 20px; border-style: solid; border-color:rgb(0,160,178) transparent transparent transparent; position: absolute; bottom:-16px; left:12px; margin-left:-10px; z-index: 0; } .box-center:before{ content: ''; width: 0; height: 0; border-width: 20px 10px 0px 10px; border-style: solid; border-color:rgb(0,160,178) transparent transparent transparent; position: absolute; bottom:-16px; left:50%; margin-left:-10px; z-index: 0; } .box-right:before{ content: ''; width: 0; height: 0; border-width: 30px 20px 0px 0px; border-style: solid; border-color:rgb(0,160,178) transparent transparent transparent; position: absolute; bottom:-16px; right:3px; z-index: -1; } </style> |
1 2 3 |
<div class="box-left">フキダシ</div> <div class="box-center">フキダシ</div> <div class="box-right">フキダシ</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<style> .circle-left, .circle-center, .circle-right{ width: 100px; height: 100px; font-size:18px; border-radius: 50%; position: relative; background: rgb(0,160,178); color:#fff; text-align: center; line-height: 100px; } .circle-left:before{ content: ''; width: 0; height: 0; border-width: 50px 0px 0px 30px; border-style: solid; border-color:rgb(0,160,178) transparent transparent transparent; position: absolute; bottom:-16px; left:12px; margin-left:-10px; z-index: 0; } .circle-center:before{ content: ''; width: 0; height: 0; border-width: 20px 10px 0px 10px; border-style: solid; border-color:rgb(0,160,178) transparent transparent transparent; position: absolute; bottom:-16px; left:50%; margin-left:-10px; z-index: 0; } .circle-right:before{ content: ''; width: 0; height: 0; border-width: 50px 30px 0px 0px; border-style: solid; border-color:rgb(0,160,178) transparent transparent transparent; position: absolute; bottom:-16px; right:3px; z-index: 0; } </style> |
1 2 3 |
<div class="circle-left">フキダシ</div> <div class="circle-center">フキダシ</div> <div class="circle-right">フキダシ</div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<style> .box1{ width: 100%; height: 50px; line-height: 50px; padding:5px 0; text-align: center; background: rgb(0,160,178); box-sizing: border-box; position: relative; float:left; } .box1:before{ content: ''; width: 0px; height: 0px; border-width:25px 0px 25px 10px; border-color: transparent transparent transparent #fff; border-style: solid; position: absolute; top: 0; left: 0; z-index: 1; } .box1:after{ content: ''; width: 0px; height: 0px; border-width:25px 10px 25px 0px; border-color: transparent #fff transparent transparent ; border-style: solid; position: absolute; top:0; right: 0; z-index: 1; } .box1 h1{ color:#fff; height: 38px; font-size:18px; line-height: 38px; border-top:1px dashed rgb(182,217,222); border-bottom:1px dashed rgb(182,217,222); margin:0; padding:0 10px; font-weight: 100; box-sizing: border-box; } </style> |
1 2 3 |
<div class="box1"> <h1>リボンサンプル1</h1> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<style> .box2{ width: 400px; height: 50px; line-height: 50px; padding:5px 0; text-align: center; background: rgb(0,160,178); box-sizing: border-box; position: relative; } .box2:before{ content: ''; width: 0px; height: 0px; border-width:12.5px 0px 12.5px 8px; border-color: transparent transparent transparent #fff; border-style: solid; position: absolute; top: 0; left: 0; z-index: 1; } .box2:after{ content: ''; width: 0px; height: 0px; border-width:12.5px 0px 12.5px 8px; border-color: transparent transparent transparent #fff; border-style: solid; position: absolute; top: 25px; left: 0; z-index: 1; } .box2 h1{ color:#fff; height: 38px; font-size:18px; line-height: 38px; border-top:1px dashed rgb(182,217,222); border-bottom:1px dashed rgb(182,217,222); margin:0; padding:0 10px; font-weight: 100; box-sizing: border-box; } </style> |
1 2 3 |
<div class="box2"> <h1>リボンサンプル</h1> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<style> .obi-l{ width: auto; height: 50px; padding:5px 0; background: rgb(0,160,178); position: relative; box-sizing: border-box; display: inline-block; } .obi-r{ width: auto; height: 50px; font-size:18px; color:#fff; padding:5px 0; background: rgb(0,160,178); position: relative; box-sizing: border-box; display: inline-block; } .obi-l:before{ content: ''; width: 0; height: 0; border-width: 30px 0 0 30px; border-style: solid; border-color:rgb(0,99,110) transparent transparent transparent; position: absolute; bottom: -30px; left: 0; z-index:1; } .obi-l:after{ content: ''; width: 100px; height: 50px; background: rgb(0,137,153); position: absolute; left: -70px; bottom:-30px; z-index: -1; } .obi-r:before{ content: ''; width: 0; height: 0; border-width: 30px 30px 0 0; border-style: solid; border-color:rgb(0,99,110) transparent transparent transparent; position: absolute; bottom: -30px; right: 0; z-index:1; } .obi-r:after{ content: ''; width: 100px; height: 50px; background: rgb(0,137,153); position: absolute; right: -70px; bottom:-30px; z-index: -1; } .obi-l h1, .obi-r h1{ height:40px; font-size:18px; line-height: 40px; color:#fff; border-top:1px dashed rgb(182,217,222); border-bottom:1px dashed rgb(182,217,222); margin:0; padding:0 10px; font-weight: 100; box-sizing: border-box; } </style> |
1 2 |
<div class="obi-l"><h1>オビ左折れサンプル(width:auto指定なので長さは可変します)</h1></div> <div class="obi-r"><h1>オビ右折れサンプル</h1></div> |