有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂?

关注者
762
被浏览
78,412

26 个回答


这是一个普通的 div ,一个边长为 100px 的正方形,border 宽度为 10px, 没有任何技术含量,地球人都会画。

我们知道 border 是分为 top、right、bottom、left 的,那么这个矩形的四个边是怎样划分的呢?

显然,要想公平地分割四条边框,只有这样:


所以我们如果把上、左、右三条边隐藏掉(颜色设为 transparent),会怎样呢?



呐,这就是个梯形了!感觉离革命胜利很近了是不是!

仔细观察一下这个梯形,和三角形有神马区别呢?

对!上面多了一条边!

上面这条边有什么特点呢?

它的长度刚好等于 div 的宽度

所以我们要把这个 div 的宽度缩小!

多小合适呢?

当然是 0 啦!




三角形粗来了!!!!!!!

好像太小了点,怎么把它放大捏?

很简单,我们把 border 的宽度扩大,

怎么扩大呢?

显然这条底边和上边已经没什么关系了,

上边唯一的作用就是影响三角形顶点到 div 上边缘的距离。

所以我们只需要扩大左、下、右这三条边。


下边的 width 控制了三角形的(150px)

左右两边的 width 分别控制了三角形的底边长的两部分(加起来共 200px)

再举个例子,如果把右边 width 设为 0



就是个直角三角形了~

利用相邻的两个三角形还可以拼出钝角三角形~

最后放个福利:

CSS三角形產生器

关于本问题的答案,

@Vkki

答的很赞!!我歪个楼,引申一下这个问题。

我之前在自己的博客发了篇文章:《

用 CSS 实现三角形与平行四边形

这篇文章转发到 div.io 上后,

@张云龙

给了一个超赞的链接,在这也分享一下:

The Shapes of CSS
  • 想知道怎么用 CSS 画一个爱心? 请看上面这个链接
  • 想知道怎么用 CSS 画一个五角星? 请看上面这个链接
  • 想知道怎么用 CSS 画一个无穷符号? 请看上面这个链接
  • 想知道怎么用 CSS 画一个吃豆人? 请看上面这个链接
  • 想知道怎么用 CSS 画一个鸡蛋? 请看上面这个链接
  • 请看上面这个链接

========================================

另外附上《

用 CSS 实现三角形与平行四边形

》原文,补充说明一下 CSS 实现三角形的一个应用场景

最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊。于是我将那种写法照搬到了我的博客中,也许最近逛过我博客的小伙伴已经发现了它出现在哪儿了——分页的样式。来张截图:



你在首页的底部也可以看到这样一个分页栏;是不是看上去还不错?下面就来看看这是如何实现的吧~


第一种方法:利用border

第一种方法是借助border属性 hack 出三角形,然后通过一个矩形拼接两个三角形最终制造出一个平行四边形。为什么使用border可以产生三角形呢?先来看看一张图片:



看了图中的三个小图形的变化过程,你应该已经清楚了一半。其实 hack 出三角形只需要两个条件,第一,元素本身的长宽为0;其次,将不需要的部分通过 border-color 来设置隐藏。通过类似的方法,你还可以创造出梯形,上图中的三个图形的代码如下。(另附 CodePen 示例


#first {
  width: 20px;
  height: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}

#second {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}

#third {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

接下来就要考虑如何拼接出一个平行四边形了。在border法中,它由三部分组成,分别是左三角形、矩形、右三角形。如果每次绘制平行四边形都要创建三个元素显然过于麻烦了,所以在这里:before和:after伪元素是个不错的选择。下面我们实现一下这样的效果:



为了将三角形与矩形无缝拼接到一起,多处属性要保持一致,所以使用类似 Less, Sass, Stylus 等 CSS 预处理器来写这段代码会更容易维护,下面给出 Scss 版本的代码。(另附 CodePen 链接


//三角形的宽高
$height: 24px;
$width: 12px;

//对平行四边形三部分的颜色进行赋值
@mixin parallelogram-color($color) {
  background: $color;
  &:before { border-color: transparent $color $color transparent; }
  &:after { border-color: $color transparent transparent $color; }
}

//单个三角形的样式
@mixin triangle() {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: $height/2 $width/2;
  top: 0;
}

//平行四边形的样式
.para {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  height: $height;
  line-height: $height;
  margin-left: $width;
  color: #fff;

  &:after {
    @include triangle();
    right: -$width;
  }

  &:before {
    @include triangle();
    left: -$width;
  }

  @include parallelogram-color(red);
}

需要注意的是,如果通过 $height、$width 设置的三角形斜率太小或太大都有可能造成渲染出锯齿,所以使用起来要多多测试一下不同的宽高所得到的视觉效果如何。


第二种方法:利用transform

使用transform来实现平行四边形的方法是我在逛去啊的时候看到的,效果大概是这个样子:



看到之后觉得好神奇啊,原来还可以只有平行四边形的外轮廓。(因为方法一只能创造填充效果的平行四边形)实现起来非常简单,主要是借助了transform: skew(...),下面就来看看源码吧。


<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
</style>

<div class="city">上海</div>

于是我们得到了这样的效果:



看到图片的你一定是这样想的:



别着急嘛,我们的确是把整个 div 进行了歪曲,导致中间的文字也是倾斜的,而这显然不是我们所要的效果。所以我们需要加一个内层元素,并对内层元素做一次逆向的歪曲,从而得到我们想要的效果:



实现代码如下,另附 CodePen 示例


<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}

.city div {
  transform: skew(20deg);
}
</style>

<div class="city">
  <div>上海</div>
</div>

总结

第一种方法使用 border 属性 hack 出三角形,并通过对三个元素进行拼接最终实现了平行四边形;而第二种方法则通过 transform: skew 来得到平行四边形。总体来说,第二种方法相对于第一种代码量小得多,而且也很好理解。唯一的不足是无法构造像本站的分页中所使用的梯形。