分析一下需求:
- 首先罐监,寬度應(yīng)該是自適應(yīng)的,我用了bootstrap的柵格化瞒爬,可以用百分比等其他自適應(yīng)方式實(shí)現(xiàn)。
- 高度與寬度相等。
- 圓形侧但。
這里的難點(diǎn)在于矢空,高度與寬度相等,我使用了padding屬性禀横。
當(dāng)padding的值的單位是百分比%時(shí)屁药,都是基于父元素的寬度的百分比。
根據(jù)盒子模型:元素的寬度 = 左右邊框 + 左右內(nèi)邊距 + 內(nèi)容寬度
代碼:
<div class="row">
<div class="col-md-4 border">
<div class="jf-home-services-wrap"></div>
</div>
<div class="col-md-4">123</div>
<div class="col-md-4">123</div>
</div>
.jf-home-services-wrap {
width: 100%;
background: #409eff;
padding: 50% 0;
border-radius: 100%;
}
.border {
border: 1px solid red;
}