首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    纯CSS画三角形

    大家好,又见面了,我是你们的朋友全栈君。...首先,创建一个空的div div class="triangle">div> 然后,CSS处理它的边框,给它不一样的颜色,好观察 .triangle{ border-left:100px...回到原来的问题,我们应该怎么得到三角形呢? 有的同学可能会以为是直接把其他三个方向的边框去掉,那你会发现,div不见了!...比如我们想得到向右的三角形 那么,我先去掉右边的边框总可以吧,这样子就会去掉蓝色框框内的内容 呈现这样子 再想一步,怎么才能让绿色的块和粉红色的块去掉,有同学想,我们把它们设置成背景颜色就好啦...看似我们把三角形画出来,但是假如换了一个背景色,我们就要手动去换边框的颜色,这里介绍一个属性值:transparent,表示透明。

    92920

    简单说 通过CSS的滤镜 实现 火焰效果

    大致需要这 3 步: 1、先用边框画出三角形 要知道,如果 width是0,height也是0,只用边框的话,边框是三角形的,我们看看 width 和 height 都是0的,但边框宽度是100px...上图,4边的边框颜色是不一样的,我们很清楚的看见了4个三角形,我们现在需要下面这样一个东西,相信大家知道怎么实现了。 ?...2、调整三角形的大小与颜色,实现类似火焰的样子 这一步很简单,我们只需要在上面已经实现的三角形上加这三行代码 border-radius: 45%; transform: scaleX(.4)...class="container"> div class="fire"> div> div> //创建一个元素,放所有的小圆...Math.random() * Range); //四舍五入 return num; }; for (var i = 0; i < 40; i++) { //创建小圆

    1.3K30

    【前端基础面试题】如何用CSS画一个三角形(详解)

    CSS3 positon定位详解(通俗易懂) 目录 教学        思路        答案         理解        疑问                 为什么不直接设置一个边框一个三角形...                宽高为什么设置为0,和不设置宽高的区别 ---- 教学         思路   加粗边框,设置一个宽高为0的中心点,通过对角线划分的切割法,就得到了四个三角形,然后三个透明就可以得到一个三角形...疑问                 为什么不直接设置一个边框一个三角形 #square1 { width: 0px; height: 0px;...所以不会设置一条边框,就变成三角形。                宽高为什么设置为0,和不设置宽高的区别                         我们把宽度高度取消,单设置一条边框。...">div>             结果就是一条高度100px的线条,宽度不知道是多少,div的默认宽度为父元素的100%,也就是占了body的宽度,  这是不设置宽高 光设置边框的结果

    53820

    【CSS】使用 CSS 实现三角形 ( 宽高设置为 0 | 设置四个边框宽度 样式 颜色值 | 兼容低版本浏览器 | 基本示例 | 对话框示例 )

    一、使用 CSS 实现三角形 ---- 使用 CSS 实现三角形步骤 : 首先 , 宽度 / 高度 设置为 0 ; /* 宽高设置为 0 像素 */ width: 0; height:...0; 然后 , 设置 4 个边框 , 每个边框都要设置相同的宽度 , 实线 , 以及颜色值 ; 该颜色值就是显示的三角形颜色值 ; /* 4 个边框都要设置 如果不需要 */ border-top...*/ border-style: solid; /* 设置 4 个边框的宽度 */ border-width: 10px; /* 设置 4 个边框的颜色 都设置成透明...class="box">div> div class="box2">div> 显示效果 : 下面是放大 400% 后的效果 ; 设置 10 像素的边框...class="triangle"> div class="triangle-in">div> div> 执行结果 :

    1K30

    CSS 奇思妙想 | 巧妙的实现带圆角的三角形

    之前在这篇文章中 -- 《老生常谈之 CSS 实现三角形》,介绍了 6 种使用 CSS 实现三角形的方式。 但是其中漏掉了一个非常重要的场景,如何使用纯 CSS 实现带圆角的三角形呢?...本文将介绍几种实现带圆角的三角形的实现方式。 法一. 全兼容的 SVG 大法 想要生成一个带圆角的三角形,代码量最少、最好的方式是使用 SVG 生成。...我们实际是通过一个带边框,且边框连接类型为 stroke-linejoin: round 的多边形生成圆角三角形的。...如果,我们把底色和边框色区分开,实际是这样的: .triangle { fill: #0f0; stroke: #000; stroke-width: 10; } ?...图形拼接实现渐变色圆角三角形 完了吗?没有! 上述方案,虽然不算太复杂,但是有一点还不算太完美的。就是无法支持渐变色的圆角三角形。像是这样: ? 如果需要实现渐变色圆角三角形,还是有点复杂的。

    4.9K42

    巧用 CSS 实现炫彩三角边框动画

    最近有个小伙伴问我,在某个网站看到一个使用 SVG 实现的炫彩三角边框动画,问能否使用 CSS 实现: 很有意思的一个动画效果,立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画,非常的类似...基于矩形图形得到三角形 OK,接下来,我们需要基于矩形图形得到三角形图形,对于外圈的三角形,我们可以通过 clip-path 切割得到,也非常的简单: div { width: 260px;...不过使用 mask 基于这样一个图形再实现一个小一号的三角形是比较麻烦的,我们相当于要实现这样一个镂空三角形图形,示意图如下: 这样一个图形,配合 clip-path,就能得到一个三角形边框图形,啥意思呢...,我这里制作了一个动图示意: 左边是利用 mask 实现遮罩后的图形,右边是利用 clip-path 切割后的图形,它们的效果叠加在一起,就能实现一个边框三角形。...rotate 3s infinite linear; } @keyframes rotate { to { --angle: 360deg; } } 我们就得到了一个内部镂空的三角形边框了

    1.1K31

    分享一些有趣的前端图形和页面

    css绘制三角形 在盒子模型中border也占据了宽高,对于下面的样式: 1 2 3 4 5 6 7 #div1{ width: 100px; height: 100px; border-style...4个部分组成的,如果将div1的宽高设置为0,就变成如下效果: image.png 可以发现边框变成了4个等腰直角三角形,如果继续将上边框的宽度设置为0,如下: 1 2 3 4 5 6 7 #div1{...,而左右两个三角形变小了,所以可以通过设置4个边框宽度来自由调整三角形的形状。...如果只需要其中某个三角形,只要将不需要的三角形颜色设置为透明即可,如下: 1 2 3 4 5 6 7 8 #div1{ width: 0; height: 0; border-style...参考链接 css如何将div画成三角形 用 CSS 画小猪佩奇,你就是下一个社会人!

    72930

    CSS 巧用 :before和:after

    class="triangle">div> 以上代码将会在页面上展示一个正方形,左边是个红色的三角形,右边是紫色的三角形,上面是黑色的三角形,下面是蓝色的三角形。...那么有人就会问,我们要的不是三角形么?野兽你画个正方形逗我呢?...50px,transparent表示边框颜色是透明的,solid表示边框是实线的*/ border-top-color: black; /*这里我们仅将上边框的颜色设置为黑色,众所周知,css...: black; //这里设置左边边框色为黑色 border-right-color:black //这里设置右边边框色为黑色*/ } 然后这时我们就会看到一个在顶部的方向向下的三角形...class="test-div">div> 通过以上代码,我们将会看见一个类似微信/QQ的对话框样式,但是美中不足的是,在对话框的四周的边框不是完整的,而是在对话框的突出三角形上是木有边框的T_T

    1.2K30
    领券