整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS 巧妙地实现带圆角的三角形

前在这篇文章中 -- 《老生常谈之 CSS 实现三角形》,介绍了 6 种使用 CSS 实现三角形的方式。

但是其中漏掉了一个非常重要的场景,如何使用纯 CSS 实现带圆角的三角形呢?,像是这样:

本文将介绍几种实现带圆角的三角形的实现方式。

法一. 全兼容的 SVG 大法

想要生成一个带圆角的三角形,代码量最少、最好的方式是使用 SVG 生成。

使用 SVG 的 多边形标签 <polygon> 生成一个三边形,使用 SVG 的 stroke-linejoin="round" 生成连接处的圆角。

代码量非常少,核心代码如下:

<svg  width="250" height="250" viewBox="-50 -50 300 300">
  <polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200"/>
</svg>
.triangle {
    fill: #0f0;
    stroke: #0f0;
    stroke-width: 10;
}

实际图形如下:

这里,其实是借助了 SVG 多边形的 stroke-linejoin: round 属性生成的圆角,stroke-linejoin 是什么?它用来控制两条描边线段之间,有三个可选值:

  • miter 是默认值,表示用方形画笔在连接处形成尖角
  • round 表示用圆角连接,实现平滑效果
  • bevel 连接处会形成一个斜接

我们实际是通过一个带边框,且边框连接类型为 stroke-linejoin: round 的多边形生成圆角三角形的

如果,我们把底色和边框色区分开,实际是这样的:

.triangle {
    fill: #0f0;
    stroke: #000;
    stroke-width: 10;
}

通过 stroke-width 控制圆角大小

那么如何控制圆角大小呢?也非常简单,通过控制 stroke-width 的大小,可以改变圆角的大小。

当然,要保持三角形大小一致,在增大/缩小 stroke-width 的同时,需要缩小/增大图形的 width/height

完整的 DEMO 你可以戳这里:CodePen Demo -- 使用 SVG 实现带圆角的三角形

法二. 图形拼接

不过,上文提到了,使用纯 CSS 实现带圆角的三角形,但是上述第一个方法其实是借助了 SVG。那么仅仅使用 CSS,有没有办法呢?

当然,发散思维,CSS 有意思的地方正在于此处,用一个图形,能够有非常多种巧妙的解决方案!

我们看看,一个圆角三角形,它其实可以被拆分成几个部分:

所以,其实我们只需要能够画出一个这样的带圆角的菱形,通过 3 个进行旋转叠加,就能得到圆角三角形:

绘制带圆角的菱形

那么,接下来我们的目标就变成了绘制一个带圆角的菱形,方法有很多,本文给出其中一种方式:

  1. 首先将一个正方形变成一个菱形,利用 transform 有一个固定的公式:
<div></div>
div {
    width:  10em;
    height: 10em;
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
}
  1. 将其中一个角变成圆角:
div {
    width:  10em;
    height: 10em;
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
  + border-top-right-radius: 30%;
}

至此,我们就顺利地得到一个带圆角的菱形了!

拼接 3 个带圆角的菱形

接下来就很简单了,我们只需要利用元素的另外两个伪元素,再生成 2 个带圆角的菱形,将一共 3 个图形旋转位移拼接起来即可!

完整的代码如下:

<div></div>
div{
    position: relative;
    background-color: orange;
}
div:before,
div:after {
    content: '';
    position: absolute;
    background-color: inherit;
}
div,
div:before,
div:after {
    width:  10em;
    height: 10em;
    border-top-right-radius: 30%;
}
div {
    transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
div:before {
    transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%);
}
div:after {
    transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

就可以得到一个圆角三角形了!效果如下:

完整的代码你可以戳这里:CodePen Demo -- A triangle with rounded

法三. 图形拼接实现渐变色圆角三角形

完了吗?没有!

上述方案,虽然不算太复杂,但是有一点还不算太完美的。就是无法支持渐变色的圆角三角形。像是这样:

如果需要实现渐变色圆角三角形,还是有点复杂的。但真就还有人鼓捣出来了,下述方法参考至 -- How to make 3-corner-rounded triangle in CSS。

同样也是利用了多块进行拼接,但是这次我们的基础图形,会非常的复杂。

首先,我们需要实现这样一个容器外框,和上述的方法比较类似,可以理解为是一个圆角菱形(画出 border 方便理解):

<div></div>
div {
    width: 200px;
    height: 200px;
    transform: rotate(30deg) skewY(30deg) scaleX(0.866);
    border: 1px solid #000;
    border-radius: 20%;
}

接着,我们同样使用两个伪元素,实现两个稍显怪异的图形进行拼接,算是对 transform 的各种用法的合集:

div::before,
div::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
}
div::before {
    border-radius: 20% 20% 20% 55%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
    background: red;
}
div::after {
    border-radius: 20% 20% 55% 20%;
    background: blue;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}

为了方便理解,制作了一个简单的变换动画:

本质就是实现了这样一个图形:

最后,给父元素添加一个 overflow: hidden 并且去掉父元素的 border 即可得到一个圆角三角形:

由于这两个元素重叠空间的特殊结构,此时,给两个伪元素添加同一个渐变色,会完美的叠加在一起:

div::before,
div::after, {
    background: linear-gradient(#0f0, #03a9f4);
}

最终得到一个渐变圆角三角形:

上述各个图形的完整代码,你可以戳这里:CodePen Demo -- A triangle with rounded and gradient background

最后

本文介绍了几种在 CSS 中实现带圆角三角形的方式,虽然部分有些繁琐,但是也体现了 CSS ”有趣且折磨人“ 的一面,具体应用的时候,还是要思考一下,对是否使用上述方式进行取舍,有的时候,切图也许是更好的方案。

篇将介绍几个css小技巧,目录如下:

  1. 自定义引用标签的符号
  2. 重置所有标签样式
  3. 禁止文本选择
  4. 制作小三角形

自定义<q>引用标签的符号

默认q标签引用符号是浏览器根据不同语言环境自动设置的,当然我们也可以使用quotes属性自定义符号,如下实例:

html:

<p>
  <div>
    <q>不乱于心,不困于情。不畏将来,不念过往。如此,安好</q>
  </div>
  <div class="q1">
    <q>听君一席话,胜读十年书</q>
  </div>
  <div class="q2">
    <q>理想的人物不仅要在物质需要的满足上,还要在精神旨趣的满足上得到表现</q>
  </div>
  <div class="q3">
    <q>学问是经验的<q>积累</q>,才能是刻苦的<q>忍耐</q></q>
  </div>
  <br>
</p>

css:

q{
  font-size: 30px; /*默认*/
}
div.q1 q{
  quotes:"#" "#";
}
div.q2 q {
  quotes: none; /*无符号*/
}
div.q3 q {
  quotes: "“" "„" "«" "»"; /*嵌套引用,第三、四符号用于嵌套q标签*/
}

效果如下:

重置所有标签样式

仅使用一个属性将所有样式重置为默认值。

  • 使用该属性将所有样式(继承或不继承)重置为其默认值。
  • 注意:这不会影响 direction 和 unicode-bidi 属性。

代码如下:

html:

<div class="reset-all-styles">
  <h5>Title</h5>
  <p>
  《书·大禹谟》:“名言兹在兹,允出兹在兹,惟帝念功。”孔传:“名言此事,必在此义。”
  </p>
</div>

css:

.reset-all-styles {
  all: initial;
}

禁止文本被选择

如果不想某些文字被选择,可以使用如下代码:

html:

<p class="unselectable">你选不中我!</p>

css:

.unselectable {
  user-select: none;
}

创建一个三角形

使用纯 CSS 创建一个三角形。

  • 使用三个边框创建一个三角形。
  • 所有边框都设置相同的 border-width。
  • 三角形朝向的反方向border-color:color 设置颜色,其它方向的 border-color:transparent 设置透明。
  • 更改border-width值将更改三角形的比例。

html:

上<div class="triangle up"></div>
右<div class="triangle right"></div>
下<div class="triangle down"></div>
左<div class="triangle left"></div>

css:

.triangle {
  width: 0;
  height: 0;
  border-style:solid;
  border-width:20px;
}
/*上*/
.up{
  border-color:transparent transparent #9C27B0 transparent;
}
/*右*/
.right{
  border-color:transparent #9C27B0 transparent transparent;
}
/*下*/
.down{
  border-color:transparent transparent #9C27B0;
}
/*左*/
.left{
  border-color:transparent transparent transparent #9C27B0;
}

热门文章推荐:

css中4种方法使内容居中

前端入门——css 盒子模型

前端入门——css颜色和背景

前端入门——css边框和圆角

前端入门——css 选择器

前端入门——css字体和文本

信大家也会浏览招聘网站的招聘要求,基本上每一家的找前端的要求都包含必须要精通CSS3。这次和大家来讲一下css3,在前端编程中,html,css,js分别被称之为前端编程中的骨,肉,魂。



html搭建前端页面的结构,就像是人的骨骼一般,支撑整个页面。


css控制前端页面显示的效果和布局,就像是人的血肉一般,使得整个页面更加生动,灵活。


js控制前端页面的业务逻辑,就像是人的灵魂一般,让页面能像一个人一样做该做的事情。


所谓的css3是什么呢?


其实也没有什么神秘,就是css(Cascading Style Sheets,层叠样式表)的第三个版本,相对于之前的css,它有了更多优秀的,适合页面需要的布局以及效果。可以说如果我们掌握了css3,那么我们可以更加灵活的,符合需求的来完成页面的需求。做出更加美观,简洁的页面。



css3到底需要学习什么?


css3需要学习的是css3新增的选择器,样式属性。


css3新增的选择器让我们可以更加灵活的选择页面中的元素并为其设置样式。


css3新增的样式属性可以让我们设置页面的效果和布局,提供了更多,更加符合需要的样式属性。


CSS3 边框


通过 CSS3 可以创建圆角边框、添加阴影框,可以使用图片来绘制边框,而不需要使用设计软件,比如 PS。


CSS3 增加了3个新的边框属性:border-radius、box-shadow 和 border-image。



CSS3 圆角边框

在 CSS2 中添加圆角边框需要技巧,而且很费事,必须在每个角使用不同的图片。使用 CSS3 可以很容易的创建圆角。CSS3 的 border-radius 属性用于创建圆角。


CSS3 边框阴影

CSS3 的 box-shadow 属性用于向盒子添加阴影效果。