css border实现图形

div{margin: 50px;width: 100px;height: 100px;background: red;
}
/* 半圆 */
.half-circle{height: 50px;border-radius: 50px 50px 0 0;
}
/* 扇形 */
.sector{border-radius: 100px 0 0;
}
/* 三角 */
.triangle{width: 0px;height: 0px;background: none;border: 50px solid red;border-color: red transparent transparent transparent;
}
/* 梯形 */
.ladder{width: 50px;height: 0px;background: none;border: 50px solid red;border-color: red transparent transparent transparent;
}作者：谢小飞
链接：https://juejin.im/post/5df1e312f265da33d039d06d
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

css border实现图形相关推荐

纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
css一些特殊的图形,CSS 绘制特殊图形
先来绘制一个简单基础容器 CSS 绘制特殊图形 div { width: 300px; height: 300px; background: orange; border: 30px solid; b ...
CSS组件之图形（figure）
CSS组件之图形(figure) 三角形(triangle) 上三角(triangle-up) 下三角(triangle-down) 左三角(triangle-left) 右三角(triangle-r ...
css绘制不规则图形
CSS绘制不规则图形在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表.不规则图形.规则图形: 常见方法对于图形的实现,可以大体上分为几种做法 (1) 背景图片,请UI小姐姐帮你吧-- ...
CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
svg画css,CSS vs. SVG:图形文本的效果
这篇文章是探索有关于CSS和SVG技术的系列文章第一篇,通过例子来阐述CSS和SVG相关技术的比较.因为大家对SVG有一定的偏见,这个系列文章只是为了证明SVG解决Web上的某些设计问题.因为它是自然 ...
css 对话框阴影,科技常识：css实现不规则图形的阴影（如对话框）
今天小编跟大家讲解下有关css实现不规则图形的阴影(如对话框) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css实现不规则图形的阴影(如对话框) 的相关资料,希望小伙伴们看了有所帮助. ...
CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
css border画图
css border属性竟然可以用来画图,今天项目中遇到该问题,借此有机会深入了解了下. css border属性在我的印象当中只是方方正正的东西,无非就是增加边框的宽度,变换边框的颜色,因此一直以为 ...

css border实现图形

css border实现图形相关推荐

最新文章

热门文章