用div 画出三角形

画三角形的代码:

border-top: 10px solid rgba(0,0,0,0);
    border-bottom: 10px solid rgba(0,0,0,0);
    border-right: 10px solid rgba(0,0,0,0);
    border-left: 10px solid #009d6f;

这段代码也能画出三角形,底色为白色,三角形为绿色的.但这有一个问题,就是虽然设置了边框为透明,但边框还是会遮挡底部的元素,且如果底部元素为红色,你会看到一张白色图片上放着一个绿色的三角形,这很不完美。解决办法如下:

background-clip: padding-box;
    border-top: 10px solid rgba(0,0,0,0);
    border-bottom: 10px solid rgba(0,0,0,0);
    border-right: 10px solid rgba(0,0,0,0);
    border-left: 10px solid #fff;

加上 background-clip: padding-box; 这句代码后,设置为透明色的边框可以实现真正的透明。如果底部为红色,你看到的就是绿色的三角形,没有白色的画布。

原文地址:https://www.cnblogs.com/wsz168/p/8399012.html

时间: 2024-10-09 12:07:44

用div 画出三角形的相关文章

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行

css 画出三角形

技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: 10px solid red; 当然,关于三角形指向这个,这里是指向右边,所以用了 border-left 左 → border-right 上 → border-bottom 下 → border-top

WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字

[html] view plain copy <!DOCTYPE html> <!--两个DIV--> <html> <body> <div style="width:100%;height:200px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"> </div> <div style=

用css样式和div画出田字格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title></title

场景上一个任意三角形,用程序画出任意一个顶点所在的高,三角形由程序在某一个范围内随机生成

解析: 1.题目解析:已知三角形三个顶点的坐标例如A(x1,y1),B(x2,y2),C(x3,y3),画出任意一个顶点的高线,所有必须求出高另一个点(这里我们叫H点)的坐标,然后两个点连成线. 2.逻辑解析:要计算出高线的垂直点的坐标必须用一个方程组. 3.原理解析:根据数学里面的知识,已知两个顶点(例如B.C)的坐标,即可计算出这两个点连成线的直线方程 y = kx + b:其中 k 指的是直线方程中的斜率,b是一个未知常数,因为知道B.C两点的坐标,所以可以计算出直线BC的直线方程, 那么

Effective前端3:用CSS画一个三角形

三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是这样的: 然后把它的高度和宽度去掉,剩下四个border,就变成了: 再把bord

用css控制一个DIV画图标。

在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样的效果了,而且还方便后期的维护.我们今天画四个图形,一个三角形,一个直角三角形,两种方法画多边框正方形,同心圆,分享图标. 三角形 首先,我们先画一个三角形 代码如下: 1 <div id="duo1"></div> 对 就是用一个DIV来画. 我们可以把这幅图补脑

css——一起画个三角形(菜鸟起飞系列)

1.利用border特性 首先看个例子,该例的border四边的颜色不同,宽度均为50px 代码如下: width: 0; height: 0; border-top:50px solid #FFF0C4; border-left:50px solid #C7F5BC; border-right:50px solid #D9BBF3; border-bottom:50px solid #FCC2C7; 根据border的这个特性,调整border宽度和颜色组合,我们可以画出各种三角形,如: .b

Effective前端(3)用CSS画一个三角形

来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是