苏飞论坛

标题: css-绘制蛋形 [打印本页]

---

作者: xyc    时间: 2021-7-1 18:45
标题: css-绘制蛋形
     咱们继续之前说的css实现图形的效果方法，今天来说说蛋形的实现方法。
     原理：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性。
     效果：
      (, 下载次数: 8)

上传

点击文件名下载附件
     html：
     

[HTML] 纯文本查看 复制代码

<div class="div"></div>

     css样式：
     

[CSS] 纯文本查看 复制代码

.div {

    width: 100px;

    height: 160px;

    float: left;

    background: #ffb028;

    display: block;

    -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;

    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

   }

    以上就是蛋形的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！

---

作者: 范范    时间: 2021-7-2 15:59
支持楼主，加油

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4