前端小练——如果用border做等边三角形

于 2022-07-17 22:33:39 发布
阅读量190 收藏 1
点赞数 3
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45293340/article/details/125838218
版权

先看一下代码

先设一个div

然后css设置

 

 

成果图

 

 代码解析如下

一 div宽高为0————将盒子里内容消失，只剩盒子边框

二 分别给边框东南西北设置厚度，哪个方向需要显示就写颜色，其他写透明

像等边三角形也就相当于30x40的盒子切出来的

也就是左右30px，上下40px

然后设置颜色就可以

最后用定位改变三角形位置可达成效果

看不太懂的可以去看我这篇

更通俗易懂

https://blog.csdn.net/m0_45293340/article/details/125671585?spm=1001.2014.3001.5501icon-default.png?t=M666https://blog.csdn.net/m0_45293340/article/details/125671585?spm=1001.2014.3001.5501

枫玄雾隐
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端实战：小实例4——三角形图标绘制
weixin_43328954的博客
01-29 343
前言 给一个 div 元素设置一定的宽度、高度及四条不同颜色的边框时，每个颜色对应的边框形状为梯形（如下图左），将元素的宽高设为 0 后，边框形状变为三角形（如下图右）。 实现思路 1. 设置一个边框颜色不同且边框形状为三角形的正方形； 2. 保留其中一个三角形的背景色，将其余三个的背景色改为其所覆盖的元素的背景色或改为透明色； 3. 将绘制好的小三角形通过绝对定位放置在想要的位置
2024年Web前端最新前端必备技能——轮播图（原生代码+插件）(2)，2024前端精选面试实战总结整理
最新发布
2401_84433570的博客
05-06 732
思路：我们先定义一个全局变量num，当我们点击一下就自增一次，然后滚动的距离就是ul的滚动距离，ul滚动距离=num*图片宽度。//一定写成this。// 别移动的距离=小圆圈的索引号*图片的宽度（注意是负值从右往左走）// 解决bug1：当我们点击了某个li就拿到当前li的索引号给num。// 解决bug2：当我们点击了某个li 就把li的索引号给yuan。// 如果yuan==4说明走到最后我们克隆的这张图片 我们就复原。
CSS画出各种三角形如等边三角形
12-09
下面的代码将演示三角形如何产生 HTML 复制代码代码如下: <div class=”triangles”></div> LESS 复制代码代码如下: .triangles { border: 50px solid transparent; border-top-color: #0075a9; border-right-color: #a89a00; border-bottom-color: #19a800; border-left-color: #a90000; width: 0; height: 0; } 表现情况  单个三角形 HTML 复制代码代码如下: <div class=
php做等边三角形,利用border制作三角形原理
weixin_39627481的博客
03-26 257
网站前端页面中，有时候会使用一些三角形，除了使用图片的方式之外，利用css的border属性也可以做出相对应的三角形。那么，利用border是如何实现三角形的制作的呢？先看下面一个例子：CSS代码：width:100px;height:100px;border-top: solid 100px blue;border-left: solid 100px black;border-right: so...
边框练习
weixin_44549398的博客
06-28 164
这是一个边框的小练习，就来简单的了解一下吧！ 首先打一个div在给他一个类，然后在这个类里面在随便打几十个div做为方格的数目，而我现在的div是120个。 之后就来写css样式，设置第一个类名的宽跟高在给他一个背景颜色，在用auto让他居中。然后在设置这个类里面的div标签的宽度和高度都为20橡数边框为1橡数.solid为实线，颜色为红色。之后在清除他的左浮动，最后在给他div里面的方格添...
html画等边三角形,前台面试：使用CSS画一个等边三角形
weixin_32744285的博客
06-05 382
CSS是前台面试必考的内容，有时候会面试官会出题让你画少量基本图形。由于画图的过程中可以考察很多的CSS知识点。今天我们就和大家详情一个比较难得等边三角形。思路是利使用三个div的边框来拼成一个三角形，只要要调整好左右两个div边框的旋转角度，就可以生成一个等边三角形。能用三个div来实现，也能借助伪类来实现三个div的效果。代码如下：//css.box{border-bottom:1pxs...
利用border来制作三角形及其他图形
qq_38873135的博客
06-18 358
（1）等腰三角形制作 代码如下：    div{             width:0;             height:0;             border-width:0 150px 100px 150px;             border-style:none solid  solid;             border-color:transpare;
微信小程序：模仿树形控件——画三角形
娜娜Cina的博客
12-26 1754
微信小程序：模仿树形控件——画三角形前言一、前端样式二、css1.底边在左的三角形2.底边在上的三角形 前言 微信小程序没有像vue这样的框架，页面需要展现一个树形结构，于是就自己写了一个，而ui又没有控制数据展开与关闭的小三角形图标，于是就利用css在前端画了一个三角形。 一、前端样式 用一个空的view标签来表示三角形。 index.wxml: <view class="triangleL"></view> <!-- 底边在左的三角形 --> <vie
前端学习——CSS入门
qq_45727209的博客
05-02 188
前端学习——CSS入门，包括：CSS引入方式、常用选择器、背景(background)、文本常用样式、盒模型、定位、图文组合、浮动等，持续更新中
利用CSS盒模型中的border（边框）实现三角形
小脚的Blog
11-07 1022
利用CSS盒模型中的border（边框）实现三角形 <div></div> div{ margin: 0 auto; width: 200px; height: 200px; border: 2px solid orange; } 这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容
利用边框制作一个等边三角形
旧有-
02-21 535
首先设置边框的宽度、类型以及颜色 在网页上便呈现出一个以边框宽度等长的正方形 然后把其余三个边框的颜色设置为透明即可制作出一个等边三角形 效果图为 三角形的大小可以根据边框的宽度来设定。 ...
css的小练习，关于border、position、margin、float等问题
发光吖的博客
08-18 482
css的小练习，关于border和定位三角形认识盒模型对于窗口绝对居中奥运五环 三角形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 0; height: 0; border-top: 100px solid
使用border画正方形、三角形等
then啥
11-22 997
&lt;div&gt;&lt;/div&gt; div{ width:0; border-top:100px solid blue; border-right:100px solid red; border-bottom:100px solid green; border-left:100px solid orange; }  需要三角形只需将对应的...
css实现等边三角形（CVTE笔试题）
wenjiusui8083的博客
03-14 1407
知识点： transform-origin: 设置基准点，结合transform使用也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。div{     borde...
前端实现三角形的三种方法
热门推荐
penwa的博客
10-19 1万+
直接贴代码行不行？我是个不善于表达的姑娘QAQ 第一种 HTML+CSS &amp;lt;div class=&quot;box&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;style&amp;gt; .box{ width:0; height:0; border:10px solid; border-color:transp
-Border属性制作三角&&斜线
rocktanga的博客
02-14 931
注2: 做三角一般就用下面第一个方法就好了，四条边都加上border 用border属性制造图形（三角、梯形等）和斜线 (1)四条边都加上border，来画三角(最常用)：这样画的三角，是四个完全一样的三角；实际操作如下 首先把这个元素的width和height都设置为0,overflow设置为hidden，图像就不会被拉伸变形，中间也就不会出现空白，也不会显示元素里面的任何内容；简单说就是让元素只显示border 然后 给四个方向的border都加上一个宽度,让四个方向都由border填充 最..
用div画三角/矩形/圆
weixin_30412013的博客
04-27 584
1. 画三角 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> .triangle { width: 0; ...
css3 写等边三角形（非border）
taotaomin99的博客
05-16 2566
非border实现等边三角形
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值