纯CSS实现一个三角形加圆角三角形

效果图：

代码如下（注释有大概思路）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三角形&圆角三角形</title><style type="text/css">/* 三角形 */#triangle{width: 0;height: 0;border-bottom: dodgerblue 20px solid;border-left: transparent 20px solid;border-right: transparent 20px solid;}/* 设置第一个圆角 */#round-triangle{margin-left: 100px;width: 50px;height: 50px;background-color: turquoise;border-top-right-radius: 30%; }/* 在首部和尾部添加两个绝对定位的图形覆盖部分上面图形设置剩下两个圆角 */#round-triangle:before, #round-triangle:after{content:"";width: 50px;height: 50px;background-color: yellow;position: absolute;  border-top-right-radius:30% ; }  /* 设置旋转、缩放、倾斜和平移让两个伪元素边缘与上面图形边缘重合 */#round-triangle:before{transform:rotate(-135deg) skewX(-45deg) scale(1.45,0.7) translate(0,-50%); } #round-triangle:after{transform:rotate(135deg) skewY(-45deg) scale(0.7,1.45) translate(50%,0);}  </style>
</head>
<body><div id="triangle"></div><div id="round-triangle"></div>
</body>
</html>

纯CSS实现一个三角形加圆角三角形相关推荐

css給一个角加圆角,css圆角边框不起作用怎么办
css设置渐变边框设置圆角无效问题开门见山,当我们给一个元素的边框设置渐变色,那设置圆角就没有效果,以输入框为例:html: css: input{ outline: none; backgroun ...
css如何实现一个小三角形,用纯css写一个常见的小三角形
js小技巧 js判断字符长度直接使用String对象的属性,空格亦算一个字符 myString = "Hello world"; length = myString.length ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: < ...
用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
纯css实现给图片加标签
纯css实现给图片加标签原理:通过border.before.after.content.position定位,等等属性实现给图片添加标签样式. 效果截图如下: 代码实例: <!DOCTYPE ...
[css] 用css给一个元素加边框有哪些方法？
[css] 用css给一个元素加边框有哪些方法? :scope {border: 3px solid black;box-shadow: 0 0 0 1px black; /*不影响布局,无限叠加*/ ...
css纯加载动画,纯CSS实现loading动画加载效果
原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...
html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理在按钮中放置一个默认隐藏径向渐变的 ...

纯CSS实现一个三角形加圆角三角形

纯CSS实现一个三角形加圆角三角形相关推荐

最新文章

热门文章