84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
我写的demo 在这https://jsfiddle.net/yye46hgy/,怎样才能得到如图的效果呢?(而且不能定宽定高,做成自适应)
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
分别设置border-radius的水平和垂直半径就行了吧。需要做些数学运算,可以用sass或less。
<style> p { width: 5em; height: 1em; padding: 0.6em 0 0.2em 0; /* 水平半径 = width/2, 垂直半径 = height + padding */ border-radius: 2.5em 2.5em 0 0/1.8em 1.8em 0 0; background-color: #f29900; color: #fff; text-align: center; font-size: 1.6rem; } </style> <p>立即申请</p>
https://jsfiddle.net/yye46hgy/2/
方法1:html
<p class="half-circle"> </p>
css
.half-circle{ width:0px; height:0px; border-width:100px; border-style:solid; border-color:violet violet transparent transparent; background-color:transparent; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); border-radius:50%; }
方法2html
<p class="half-circle"> <p class="inner-circle"> </p> </p>
.half-circle{ width:200px; height:100px; overflow:hidden; } .inner-circle{ width:200px; height:200px; border-radius:50%; background-color:purple; }
width和height为0border厚度为xx px的盒子
画半圆的思路和三角形差不多
分别设置border-radius的水平和垂直半径就行了吧。
需要做些数学运算,可以用sass或less。
https://jsfiddle.net/yye46hgy/2/
方法1:
html
css
方法2
html
css
width和height为0
border厚度为xx px的盒子
画半圆的思路和三角形差不多