您现在的位置是:首页 > 正文

如何使用css实现三角形

2024-04-01 03:43:56阅读 1

 一、前言

 

通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢?

实现过程似乎也并不困难,通过边框就可完成

二、实现过程

在以前也讲过盒子模型,默认情况下是一个矩形,实现也很简单

<style>
    .border {
        width: 50px;
        height: 50px;
        border: 2px solid;
        border-color: #96ceb4 #ffeead #d9534f #ffad60;
    }
</style>
<div class="border"></div>

效果如下图所示:

border设置50px,效果图如下所示:

白色区域则为widthheight,这时候只需要你将白色区域部分宽高逐渐变小,最终变为0,则变成如下图所示:

这时候就已经能够看到4个不同颜色的三角形,如果需要下方三角形,只需要将上、左、右边框设置为0就可以得到下方的红色三角形

 

但这种方式,虽然视觉上是实现了三角形,但实际上,隐藏的部分任然占据部分高度,需要将上方的宽度去掉

最终实现代码如下:

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
}

如果想要实现一个只有边框是空心的三角形,由于这里不能再使用border属性,所以最直接的方法是利用伪类新建一个小一点的三角形定位上去

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
}
.border:after{
    content: '';
    border-style:solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 0;
    left: 0;
}

效果图如下所示:

伪类元素定位参照对象的内容区域宽高都为0,则内容区域即可以理解成中心一点,所以伪元素相对中心这点定位

将元素定位进行微调以及改变颜色,就能够完成下方效果图:

最终代码如下:

.border:after {
    content: '';
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 6px;
    left: -40px;
}

 

三、原理分析

可以看到,边框是实现三角形的部分,边框实际上并不是一个直线,如果我们将四条边设置不同的颜色,将边框逐渐放大,可以得到每条边框都是一个梯形

当分别取消边框的时候,发现下面几种情况:

        

  • 取消一条边的时候,与这条边相邻的两条边的接触部分会变成直的

  • 当仅有邻边时, 两个边会变成对分的三角

  • 当保留边没有其他接触时,极限情况所有东西都会消失

 

通过上图的变化规则,利用旋转、隐藏,以及设置内容宽高等属性,就能够实现其他类型的三角形

如设置直角三角形,如上图倒数第三行实现过程,我们就能知道整个实现原理

实现代码如下:

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 只设置两条边*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px; 
    /* 其他设置 */
    margin: 50px;
}

网站文章

  • 史上最详细Docker部署Mysql主从复制,带每一步骤图!!!

    史上最详细Docker部署Mysql主从复制,带每一步骤图!!!

    没有夸大标题哈,能够成功的,实测后发文????本文主要讲怎么用Docker部署Mysql的主从复制,看起来很长,实际非常简单的,看一遍,立马就能懂的。直接CV也能搭建起来,莫慌。我们一起加油!!!封面...

    2024-04-01 03:43:48
  • 阿里云轻量服务器,如何将域名解析到阿里云服务器?

    阿里云轻量服务器,如何将域名解析到阿里云服务器?

    阿里云国际轻量服务器

    2024-04-01 03:43:43
  • Vue Nuxt.js + bootstrap + masonry 实现瀑布流

    Vue 下实现瀑布流的插件有很多,但是总是有这样那样的缺点,今天找到一款vue-masonry,可以完美的结合Nuxt.js。 安装 yarn add vue-masonry Nuxt根目录下有个pl...

    2024-04-01 03:43:04
  • vue3.x路由跳转useRouter执行后undefined问题 setup

    useRouter执行一定要放在setup方法内的顶部或者其他位置,不能放在下面setup的函数里面执行(方法内定义的其他函数),否则作用域改变useRouter执行是undefined。import...

    2024-04-01 03:42:58
  • linux安装android NDK

    Error:Execution failed for task ':app:compileDebugNdk'.&gt; NDK not configured.  Download the NDK fr...

    2024-04-01 03:42:51
  • 守护线程

     在Java中有两类线程:User Thread(用户线程)、Daemon Thread(守护线程)。用户线程是指用户自定义创建的线程,主线程停止,用户线程不会停止,只要当前JVM实例中尚存在任何一个...

    2024-04-01 03:42:45
  •  新手学习嵌入式需要掌握的几点知识点

    新手学习嵌入式需要掌握的几点知识点

    从事嵌入式开发十年了,有些感想写出来,一则鞭策自己,让自己看到自己的不足,认清以后的发展方向,二则深知很多朋友会像我当初一样,为不知道储备什么知识而苦恼,所以写点东西给这些朋友们提供参考。一些浅见。这...

    2024-04-01 03:42:14
  • 使用NAFNet进行图像去模糊: Python入门指南

    使用NAFNet进行图像去模糊: Python入门指南

    图像去模糊是计算机视觉领域的一个激动人心的研究方向,它有广泛的实际应用,从修复旧照片到医学成像。尽管这里展示的是一个简化的版本,但它为读者提供了一个如何使用深度学习技术进行图像去模糊的基本概念。为了训...

    2024-04-01 03:42:09
  • centos6.5 安装redis3.0.7

    centos6.5 安装redis3.0.7

    2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

    2024-04-01 03:42:03
  • 数据分析技能树

    数据分析技能树

    2024-04-01 03:41:35