css怎么画三角形?

css怎么画三角形?

三角形实现原理:宽度width为0;height为0;

方法:设置div长宽为0,只用边框宽填充,三角形的底部边框设置颜色,剩下的三边用透明边框设置即可。使用border属性即可设置边框颜色。

(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。

(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。

1、Triangle Up

1.png

#triangle-up {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid red;
}

2、Triangle Down

2.png

#triangle-down { 
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-top: 100px solid red;
}

3、Triangle Left

3.png

#triangle-left { 
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-right: 100px solid red;
   border-bottom: 50px solid transparent;
}

4、Triangle Right

4.png

#triangle-right { 
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-left: 100px solid red;
   border-bottom: 50px solid transparent;
}

5、Triangle Top Left

5.png

#triangle-topleft { 
   width: 0;
   height: 0;
   border-top: 100px solid red;
   border-right: 100px solid transparent;
}

6、Triangle Top Right

6.png

#triangle-topright { 
   width: 0;
   height: 0;
   border-top: 100px solid red;
   border-left: 100px solid transparent;
}

7、Triangle Bottom Left

7.png

#triangle-bottomleft { 
   width: 0;
   height: 0;
   border-bottom: 100px solid red;
   border-right: 100px solid transparent;
}

8、Triangle Bottom Right

8.png

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
Image placeholder
前端答疑
未设置
  56人点赞

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

推荐文章
css怎么做直角三角形

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

三角形用css怎么写?

三角形用css怎么写?1,首先,我创建了一个class名为‘box’的div,我们暂且亲切的称它为‘小盒子’html: css: .box{ width:20px; height:20px; back

css绘制不规则三角形

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

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

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

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怎么写在html中?

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

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

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

jq css怎么用?

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

css怎么控制网页内容不让选择和复制?

css怎么控制网页内容不让选择和复制?要想通过CSS禁用页面内容选中和复制操作,需要增加如下代码:-moz-user-select:none; -webkit-user-select:none; -m

iis不加载css怎么办?

iis不加载css怎么办?解决方法:打开或关闭window功能中的Internet信息服务里的万维网服务=>常见HTTP功能=>静态内容选中后安装即可。

ie6加载不了css怎么解决?

ie6加载不了css怎么解决?IE6不加载css文件,是因为css文件的编码不正确,使用记事本创建的css文件,默认编码时ANSI,这种情况下在其他浏览器下CSS样式会正常显示,但IE6及以下版本就不

邮件不支持css怎么办?

邮件不支持css怎么办?邮件是支持css的,但是需要使用内联样式,内部样式和外部样式无法使用。下面是一些在邮件中使用css的注意事项:1.邮件使用table+css布局2.邮件主要部分在body内部,

css怎么让表单右对齐?

css怎么让表单右对齐?只需要在表单外套个div标签,设置text-align:right;即可。(相关课程推荐:css视频教程) 居中对齐 .a{ width:300px; height:3

ie11下不能引入外部css怎么解决?

ie11下不能引入外部css怎么解决?问题:在IE11下使用link标签引入css时,无法正常引入,直接在页面中使用style标签没问题。原因:头文件的问题。解决方法:●删除头部的●或者,将头部改成

css怎么设置div不随滚动条移动?

css怎么设置div不随滚动条移动?把一个内容固定到某一个位置,相对与浏览器窗口进行定位就可以了。这里使用的是fixed定位。定位position通常有absolute绝对定位,relative相对定

css怎么去掉div间距?

css怎么去掉div间距?1、去除div内部间距和外部间距div{ margin:0; padding:0; }2、去除div之间的间距默认情况下,div之间是没有间距的,如果设置了display:i

css怎么设置粘性定位?

css怎么设置粘性定位?粘性定位的设置方法是给元素添加position:sticky;,sticky是css定位新增属性,类似static(没有定位)和固定定位fixed的结合。它主要用在对scrol