三角形用css怎么写?

三角形用css怎么写?

1,首先,我创建了一个 class 名为 ‘box’ 的div,我们暂且亲切的称它为‘小盒子’

html:

<div class='box'>
</div>

css:

<!--小盒子的样式-->
.box{
   width:20px;
   height:20px;
   background-color:blue;
}

我们看一下效果, 其实就是一个普通的,背景颜色为蓝色的div。

10.png

2,然后,我们给‘小盒子’添加四条边框样式,边框设置的宽一点, 四条边框的颜色给不一样的值, 方便我们查看,

.box{
width:50px;
height:50px;
background-color:blue;
 
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}

看看效果, 已经是一个比较花哨的存在了。

11.png

3,然后,我们把‘小盒子’的宽高设置为0px,去掉蓝色的背景色, 当然就只剩下四周的边框了,脑补一下, 然后我们上代码,看卡效果。

.box{
width:0px;
height:0px;
border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}

来,上效果,look一下!童鞋们, 我么似乎已经看到了4个颜色不同的三角形了,接下来要做的步骤,就很清晰了。

12.png

4,假设我们想要一个向上的三角形,只要把‘小盒子’上、右、左 方向边框的颜色设置为透明, 就只剩下下边框,也就是向上的小三角了, 来上代码,look一下!

.box{
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid  rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid  rgba(0,0,0,0);
 }

看效果!绿色的向上的小三角就出现了, \(^o^)/

13.png

设置有边框的三角形

我们来写下带边框的三角形。

1.png

如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。

最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。

这里就涉及到一个绝对定位的问题,上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下,当定位都为0(left:0px; top:0px;)时,会发生什么。

HTML:

<!-- 向上的三角形 -->
<p class="triangle_border_up">
    <span></span>
</p>
                                                      
<!-- 向下的三角形 -->
<p class="triangle_border_down">
    <span></span>
</p>
                                                      
<!-- 向左的三角形 -->
<p class="triangle_border_left">
    <span></span>
</p>
                                                      
<!-- 向右的三角形 -->
<p class="triangle_border_right">
    <span></span>
</p>

CSS:

/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:0px;
    left:0px;
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_down span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 0;
    border-style:solid;
    border-color:#fc0 transparent transparent;/*黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 28px 0;
    border-style:solid;
    border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:30px 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_right span{
    display:block;
    width:0;
    height:0;
    border-width:28px 0 28px 28px;
    border-style:solid;
    border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
    position:absolute;
    top:0px;
    left:0px;
}

效果如图:

2.png

为什么不是我们预想的如下图的样子呢

3.png

原因是,我们看到的三角形是边,而不是真的具有内容的区域,请回忆下CSS的盒子模型的内容。

4.jpg

绝对定位(position:absolute),是根据相对定位父层内容的边界计算的。

再结合上篇我们最开始写的宽高为0的空p:

5.png

这个空的p,content的位置在中心,所以内部三角形是根据中心这个点来定位的。

为了看清楚一些,我们使用上一次的方法,给span增加一个阴影:

box-shadow:0 0 2px rgba(0,0,0,1);

效果如图:

6.jpg

这回我们明确的知道了,内部的三角形都是根据外部三角形实际内容的点来定位的,而非我们肉眼看到的三角形的边界定位。

HTML不变,CSS:

/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:1px;
    left:-28px;
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_down span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 0;
    border-style:solid;
    border-color:#fc0 transparent transparent;/*黄 透明 透明 */
    position:absolute;
    top:-29px;
    left:-28px;
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 28px 0;
    border-style:solid;
    border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:-28px;
    left:1px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:30px 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_right span{
    display:block;
    width:0;
    height:0;
    border-width:28px 0 28px 28px;
    border-style:solid;
    border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
    position:absolute;
    top:-28px;
    left:-29px;
}

效果如图:

7.png

进一步来写气泡框的三角形,如图所示:

8.jpg

HTML:

<p class="test_triangle_border">
    <a href="#">三角形</a>
    <p class="popup">
        <span><em></em></span>纯CSS写带边框的三角形
    </p>
</p>

CSS:

.test_triangle_border{
    width:200px;
    margin:0 auto 20px;
    position:relative;
}
.test_triangle_border a{
    color:#333;
    font-weight:bold;
    text-decoration:none;
}
.test_triangle_border .popup{
    width:100px;
    background:#fc0;
    padding:10px 20px;
    color:#333; 
    border-radius:4px;
    position:absolute;
    top:30px;
    left:30px;
    border:1px solid #333;
}
.test_triangle_border .popup span{
    display:block;
    width:0;
    height:0;
    border-width:0 10px 10px;
    border-style:solid;
    border-color:transparent transparent #333; 
    position:absolute;
    top:-10px;
    left:50%;/* 三角形居中显示 */
    margin-left:-10px;/* 三角形居中显示 */
}
.test_triangle_border .popup em{
    display:block;
    width:0;
    height:0;
    border-width:0 10px 10px;
    border-style:solid;
    border-color:transparent transparent #fc0; 
    position:absolute;
    top:1px;
    left:-10px;
}
Image placeholder
前端答疑
未设置
  74人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css怎么画三角形?

css怎么画三角形?三角形实现原理:宽度width为0;height为0;方法:设置div长宽为0,只用边框宽填充,三角形的底部边框设置颜色,剩下的三边用透明边框设置即可。使用border属性即可设置

css怎么做直角三角形

css怎么做直角三角形一个盒子包括:margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,

css绘制不规则三角形

css绘制不规则三角形css绘制不规则三角形原理:一个盒子包括:margin+border+padding+content上下左右边框交界处出呈现平滑的斜线.利用这个特点,通过设置不同的上下左右边框宽

算法题:三角形的最小路径和

题目来源于力扣 理论基础 动态规划 三角形的最小路径和题目描述 给定一个三角形,找出自顶向下的最小路径和。每一步只能移动到下一行中相邻的结点上。说明:如果你可以只使用O(n)的额外空间(n为三角形的

css怎么写在html中?

css怎么写在html中?css样式写法可以分为:●内嵌式●内部样式表●外部样式表HTML中直接写css只能使用内嵌式和内部样式表。(相关课程推荐:css视频教程)一、内嵌式将css代码写在HTML元

css什么时候用class和id?

css什么时候用class和id?当css样式用于不止一个元素时,使用class来定义。当css样式只应用于一个元素时,使用id来定义。例如导航条,每个页面中,只存在一个顶部导航条的话,可以使用id来

怎么用css美化网页

怎么用css美化网页1、我们先来看一下没有进过美化的html页面是什么样子吧。2、然后我们来看一下有美化效果的样子是什么样子,是不是漂亮一些。(相关课程推荐:css视频教程)3、准备好自己需要修饰的h

html怎么用css

html怎么用cssCSS样式只有应用到HTML元素中,样式才会产生效果。有三种方式可以把CSS样式应用到HTML元素。一、利用HTML元素的style属性,样式表作为style属性的值,该方式也称为

jquey怎么引用css样式

jquey怎么引用css样式jquery引用css只需要一行代码即可,通过传入一个标签,来创建link标签,传入type、href、以及rel给link标签添加属性,最后再调用appendTo方法,将

asp怎么调用css中样式

asp怎么调用css中样式asp调用外部css文件有以下三种方式:1、link链接方式在需要调用的asp文件中写入一下语句:(相关课程推荐:css视频教程)2、@import导入方式在需要调用的asp

div中怎么调用css?

div中怎么调用css?div中调用css样式有多种方法,比如:1、在style标签中调用css样式;2、添加class属性调用css样式;3、添加id属性调用css样式。1、DIV标签内直接应用CS

dw怎么用css样式?

dw怎么用css样式?首先介绍一下CSS样式的属性:CSS样式属性被分为八大类:类型,背景,区块,方框,边框,列表,定位,扩展。类型主要定义文本的字体,大小,颜色,行高和修饰等。如图所示:方法一:内联

怎么用css样式为网页做竖杠?

怎么用css样式为网页做竖杠?两种方法1、带竖线的字,在每个导航标记后面加入'|'这个就是竖线(shift+回车上方的按键) Document ul{ display:flex; justif

怎么用css画圣诞树?

画圣诞树,我们首先需要会用css画三角形,(相关推荐:如何用css3画三角形)。学会了画三角形,我们就可以开始画圣诞树了。用css画圣诞树的步骤:(1)画两个三角形,先画出两个大小不同三角形。#tri

nginx不能访问css怎么办

nginx不能访问css怎么办在Nginx配置文件nginx.conf中内添加location~.*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|wof

css怎么去除定位?

如果没有指定元素的position属性值,也就是默认情况下,元素也是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保

css怎么定位?

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默

css怎么让字体不换行?

在css中,可以使用white-space属性来强制文字字体不换行;通常我们使用white-space:nowrap来强制文本文字内容不换行,文本会在在同一行上显示,直到遇到标签为止。示例:

thinkphp加载不了css怎么办?

thinkphp加载不了css怎么办?如何解决?解决方法:1、项目入口文件index.php

css怎么设置div居中?

css设置div居中的方法1、利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30div1的高减去div2的高就是div2margin-t

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复。属性值:repeat:即默认方式,完全平铺背景;no-repeat:在X及Y轴方向均不平铺;

dreamweaver中CSS怎么设置

dreamweaver中CSS怎么设置1、打开软件后,我们可以直接按下快捷键【Ctrl+J】2、或者,我们点击菜单栏的修改命令按钮。3、然后,我们点击页面属性按钮。4、接下来我们就会看到页面属性这个窗

css怎么适配不同分辨率屏幕?

这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。我们可以使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变

css怎么让输入框不显示光标?

css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大神提供的方法完美解决。一、首先隐

jq css怎么用?

jqcss怎么用?jquery中,css()方法用来返回或设置匹配的元素的一个或多个样式属性。语法:$(selector).css(name) $(selector).css(name,value)