iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 18
0
自我挑戰組

自我挑戰日記系列 第 18

CSS:把平面緞帶加弧度

大家好 /images/emoticon/emoticon37.gif

繼續昨天的緞帶
為了把平面的緞帶作的有點立體
今天稍微加了點弧度
https://ithelp.ithome.com.tw/upload/images/20171223/20107496b55BcF2WTF.jpg

<div class="ribbon">
   <div class="content">RIBBON</div>
</div>
.ribbon {
    padding: 20px;    
    margin: 50px auto;
    position: relative;
    width: 200px;
    font-size: 30px;
    color: #333;
    text-align: center;
    border-radius: 120px 120px 0 0/ 35px 35px 0 0;
    background-image: radial-gradient(closest-side at 120px 70px, #fff , #fff 97px, #BF360C 98px, #FF5722 110px);
    background-position: 0px 77px;
}

https://ithelp.ithome.com.tw/upload/images/20171223/201074967HMIgTFSmu.jpg
這裡的 border-radius 加了 / 做出了上面有弧度的效果
原本在沒有 / 時弧度的寬和高的比例會是 1:1
加了 / 前後2部分就能作出弧度的長和寬
這裡的長、寬尺寸是不能用負
所以另外用 background-image 漸層作了一個假的弧度
接著作出折痕陰影及緞帶尾端

.content:before {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: #BF360C transparent;
    bottom: -15px;
    left: 0;
    border-width: 15px 0 0 20px;
}
.content:after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: #BF360C transparent;
    bottom: -15px;
    right: 0;
    border-width: 15px 20px 0 0;
}
.ribbon:before {
    content: "";
    position: absolute;
    bottom: -15px;
    border: 25px solid #E64A19;
    z-index: -1;
    left: -50px;
    border-right-width: 45px;
    border-left-color: transparent;
}
.ribbon:after {
    content: "";
    position: absolute;
    bottom: -15px;
    border: 25px solid #E64A19;
    z-index: -1;
    right: -50px;
    border-left-width: 45px;
    border-right-color: transparent;
}

https://ithelp.ithome.com.tw/upload/images/20171223/20107496S5Qb3zuRqu.jpg

就完成了
--- 明日待續。


上一篇
CSS:Ribbon 緞帶標籤
下一篇
CSS:shadows 陰影
系列文
自我挑戰日記30

尚未有邦友留言

立即登入留言