关于用CSS画三角形

最新推荐文章于 2022-04-11 16:24:13 发布
最新推荐文章于 2022-04-11 16:24:13 发布
阅读量198 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44472100/article/details/105852966
版权

关于用CSS画三角形


最近在一些前端的面试题里看到了这个"用CSS实现三角形"，在这里写一点我对这类问题的快速解决方案，算是自己的一个小总结。（并稍微做一点深入，对于 任意形状三角形的画法。）
用CSS画三角形都是从 border这个样式入手。我先附上 border这一样式的概念图，方便大家对 border的性质有一个概念。
在这里插入图片描述
可以知道若内部content的 width和 height为0（不考虑 margin和 padding），元素可以视为一个由四个三角形（即 boder-top、 boder-left、 boder-right和 boder-bottom）组成的一个矩形。

关于boder-top、boder-left、boder-right和boder-bottom

最低0.47元/天 解锁文章
你与阳光正好
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS画三角形
贤贤的博客
07-29 210
引言 日常使用css多半是为HTML添加样式，使之更加美观，或是实现某些功能。日常对css的使用会让我们感到无趣，但其实css还能够实现许多有趣且令人感到意外的功能。因为在网页的设计过程中有道的很多是盒模型，这也使得网页上的图案多半是方的或是圆的；不知道大家是否想过画出其他的图形呢，例如五边形、六边形或是 ……三角形 画出三角形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
html css右下角三角形,css纯三角形.html
weixin_35762553的博客
06-07 339
Title/*向上*/.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_u...
用css画三角
POJIE19820106的博客
09-03 97
https://www.zhihu.com/question/35180018/answer/61554144 结论：border-bottom的宽度决定了三角形的高度，border-left和border-right决定了三角形的宽度。 CSS三角形產生器 http://apps.eky.hk/css-triangle-generator/zh-hant ...
css 面试题画三角
Focus-Fe
02-27 411
   如何画三角？    .test{ width:0; height:0; border:10px solid; border-color:red transparent transparent transparent; }    地址：http://jsbin.com/mabamefeqe/edit?html,css,output ...
使用border 画三角形
cvper's world !
12-17 1280
使用CSS 的border实现各种三角形的效果
使用css画三角形的方法代码
09-25
使用css画三角形的方法代码，大家参考使用吧，下面还有一个兼容IE6的代码
用css画三角形
04-10
用纯css绘制三角形，不是用图片
Css画三角形1
08-08
Css画三角形border 加粗。
CSS画出各种三角形如等边三角形
09-25
下面的代码将演示三角形如何产生的以及等边三角形画法，喜欢css的朋友可以参考下，希望对大家学习css有所帮助
css 右边三角
梦寻汝的博客
08-18 872
<div class="trapzoid">普通</div> .trapzoid{width:300px; height:150px;margin:200px auto; background:#06F; position:relative; border-top-left-radius: 10px; border-bottom-left-radius: 10px; color: #fff; text-align: center; line-height: 1...
css 不换行_26个CSS小技巧，开发各种炫酷网页效果必备
weixin_39964819的博客
11-21 204
本文总结日常开发中26个CSS实现方法解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移.wrap { display: inline-block; overflow: hidden vertical-align: bottom}超出部分显示省略号// 单行文本.wrap { overflow:hidden;/*超出部分隐藏*/ text-overflo...
CSS关键问题
咸鱼的博客
10-03 492
CSS三大特性： 1. 层叠性： 后来定义的同一个样式会覆盖之前的样式（后来居上） 2. 继承性： 子元素会继承父元素的样式（子承父业）,但是也不是所有的样式都能能够继承： 3. 优先级（重点） 选择器不同，会出现样式同时设置生效优先级问题（权重）： 盒模型 盒子的大小 = 内容宽高度 + 内边距 + 边框 盒子模型的布局稳定性： 按照优先级：宽度（width）>其次使用内边距（padding）>再次使用外边距（mar...
css 一侧是三角形的矩形_css揭秘-视觉效果
weixin_32521765的博客
12-28 1018
单侧投影难题box-shadow 如何在元素的一侧（偶尔是两侧）设置投影。单侧投影大多数人使用 box-shadow 的方法是，指定三个长度值和一个颜色值：box-shadow: 2px 3px 4px rgba(0,0,0,.5);box-shadow 的绘制原理：以该元素相同的尺寸和位置，画一个 rgba(0,0,0,.5) 的矩形；把它向右移 2px，向下移 3px；使用模糊算法将它进行 4...
用css画31个图形
qq_41429765的博客
04-11 315
代码 1. 椭圆 .oval{ width:200px; height:100px; background-color:skyblue; border-radius:100px/50px; } 2. 上三角 .triangle-up{ width:0; height:0; border-right:50pxsolidtransparent; border-bottom:100pxsolids...
104_利用纯css样式来做出三角形
述安的博客
08-25 92
原理很简单，其实盒子的边框都是梯形，并不是矩形，当我们缩短宽高时，梯形的上边就会慢慢缩短，当我们设置宽高为0时，梯形的上边就变成了0，也就是一个点，此时就相当于变成了三角形 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { width: 0;
html中怎么不让网页缩放_网页中的形状图形都是怎么画出来的？
weixin_39915267的博客
11-29 129
后台回复【福利】领取JavaScript零基础入门课程很多小伙伴在做开发的时候，遇到一些要画很多形状的时候，就很纠结了，知道怎么用CSS去布局，就是不知道怎么画图案。其实使用CSS可以绘制出很形状的，比如三角形，梯形，圆形，椭圆形等等，并不只能画矩形。今天的教程，就来教大家怎么去用CSS绘制这些图形吧。为了方便大家去理解，今天分成基本形状和组合形状来一起讲解吧，基本形状是非常好理解的，再...
css 一侧是三角形的矩形_CSS 绘制各种形状
weixin_39589693的博客
12-28 443
说明使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆，等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解，文章分为基本形状 和 组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。基本形状三角形.triangle { width: 0; height: 0; border: 50px solid blue; /* ...
用css制作带三角矩形
www.hhspace.cn
06-17 7409
在网页中通常会见到一种带三角的矩形框，常见于注释或者弹框提示。在百度2015校园招聘的笔试题目中也有一道题目要求利用css来绘出一个带三角矩形。如图所示。   在css中，三角形是采用盒子模型的border属性来绘制的。所以在进行上图绘制之前有必要回顾一下css盒子模型。css盒子模型同一方向共有四个属性，比如横向有margin，border，padding，width。其中width指定内容
如何利用CSS写一个六边形？
weixin_33961829的博客
06-07 536
众所周知，一般情况下div所表现出来的形态是一个矩形，如果给它添加border-radius属性，可以让它成为一个圆角矩形或者是圆形，但是如果希望div表现出更多的形态来呢？那么我们就来讲讲如何用CSS来写一个六边形。大家首先来看一下，一个六边形，拆解开来的话，就是一个矩形加左右两个三角形。三角形的话很好写，用边框border属性就可以实现。当我们给一个div非常粗的边框，但是宽度和高度分别都设置...
html加css画三角形
最新发布
06-05
可以使用CSS3的 `border` 属性来实现一个三角形，具体代码如下： HTML： ``` <div class="triangle"></div> ``` CSS： ``` .triangle { width: 0; height: 0; border-width: 50px; border-style: solid; border-color: transparent transparent #000 transparent; } ``` 解释： 首先，我们创建一个空的 `div` 元素，并设置它的宽度和高度为 0。 然后，我们使用 `border-width` 属性设置三角形的边框宽度为 50px。 接着，我们使用 `border-style` 属性设置三角形的边框样式为实线。 最后，我们使用 `border-color` 属性设置三角形的边框颜色。这里我们让左侧、右侧和底部的边框颜色为黑色，而顶部的边框颜色为透明，从而得到一个三角形形状。 需要注意的是，这里的三角形是等腰直角三角形，如果需要画其他形状的三角形，需要调整 `border-width` 和 `border-color` 属性的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值