css三角形怎么写

2025-07-12 20:58:42分类：首页 > 知识

1.如何用CSS写一个三角形

1.可以用css3的border-radius属性来实现，支持ie9+

<div class="dm">

</div>

<div class="dm1">

</div>

<div class="dm2">

</div>

<div class="dm3">

</div>

<div class="dm4">

</div>

<div class="dm5">

</div>

<div class="dm6">

</div>

<div class="dm7">

</div>

<style>

.dm {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #00897B;

}

.dm1{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid #00897B;margin-top: 20px;

}

.dm2{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid #00897B;

border-bottom: 50px solid transparent;margin-top: 20px;

}

.dm3{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid #00897B;

border-bottom: 50px solid transparent;margin-top: 20px;

}

.dm4{

width: 0;

height: 0;

border-top: 100px solid #00897B;

border-right: 100px solid transparent;margin-top: 20px;

}

.dm5{

width: 0;

height: 0;

border-top: 100px solid #00897B;

border-left: 100px solid transparent; margin-top: 20px;

}

.dm6{

width: 0;

height: 0;

border-bottom: 100px solid #00897B;

border-right: 100px solid transparent

}

.dm7{

width: 0;

height: 0;

border-bottom: 100px solid #00897B;

border-left: 100px solid transparent;

}

</style>

2.利用CSS怎样写出三角形

#bottom{ width:0px; height:0px; border-left:30px solid #FFFFFF; border-top:30px #FF6699 solid; border-right:30px solid #FFFFFF; } #top{ width:0px; height:0px; border-left:30px solid #FFFFFF; border-bottom:30px #FF6699 solid; border-right:30px solid #FFFFFF; } #rt{ width:0px; height:0px; border-left:30px solid #FFffff; border-bottom:30px #ff6699 solid; } #lt{ width:0px; height:0px; border-right:30px #FFffff solid; border-bottom:30px solid #FF0000； } 下 上 右下 左下。

3.如何用CSS写一个三角形

1.可以用css3的border-radius属性来实现，支持ie9+ <style> .dm { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #00897B;}.dm1{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #00897B;margin-top: 20px;}.dm2{ width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #00897B; border-bottom: 50px solid transparent;margin-top: 20px;}.dm3{ width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #00897B; border-bottom: 50px solid transparent;margin-top: 20px;}.dm4{ width: 0; height: 0; border-top: 100px solid #00897B; border-right: 100px solid transparent;margin-top: 20px;}.dm5{ width: 0; height: 0; border-top: 100px solid #00897B; border-left: 100px solid transparent; margin-top: 20px;}.dm6{ width: 0; height: 0; border-bottom: 100px solid #00897B; border-right: 100px solid transparent}.dm7{ width: 0; height: 0; border-bottom: 100px solid #00897B; border-left: 100px solid transparent;}</style>。

4.怎样用html或css制作三角形

希望可以帮到楼主，下面是实现的代码：

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

HTML代码：

<div id="trlangle-up></div>

希望我的回答对楼主有帮助，不懂可以继续追问。

5.如何使用HTML&CSS写一个三角形

<div style="width:200px; height:174px; -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%); clip-path: polygon(50% 0, 0 100%, 100% 100%); text-align:center; line-height:300px; color:#fff; background-color:red">；等边三角形</div>

<div style="width:200px; height:100px; -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%); clip-path: polygon(50% 0, 0 100%, 100% 100%); text-align:center; line-height:175px; color:#fff; background-color:red">；等腰直角三角形</div>

6.利用CSS怎样写出三角形利用CSS+DIV怎样写

<meta charset="utf-8">无标题文档<style>.a{ border-bottom:1px solid #aaa; height:50px; width:100px; position:relative; overflow:hidden;}.b{ position:absolute; display:block; top:0px; left:0px; width:100px; height:50px;}.b i,.b em{ position:absolute; left:0px; bottom:0px; border-color:transparent; border-color:rgba(255,255,255,0); border-style:solid; border-width:0 50px 50px 50px;}.b i{ border-bottom-color:#aaa;}.b em{ border-bottom-color:#FFF; bottom:-1px;}.text{ position:absolute; bottom:10px; background:none; border:none; outline:none; text-align:center; width:100%;}</style><body> 。

7.css3怎样做一个这样的三角形,写一下

用线性滤镜就行 background: linear-gradient(135deg,rgba(0,0,0,0) 34px,red 36px); background: -o-linear-gradient(135deg,rgba(0,0,0,0) 34px,red 36px); background: -moz-linear-gradient(135deg,rgba(0,0,0,0) 34px,red 36px); background: -webkit-linear-gradient(135deg,rgba(0,0,0,0) 34px,red。

8.怎么利用CSS3绘制三角形

1、新建一个html5网页，名称为index.html，在<body>；代码中写上四个div，分别是向上、向下、向左，向右四个三角形，代码如下：

<div class="triangle-up"> <；！--向上的三角--> </div>

<div class="triangle-down"> <；！--向下的三角--> </div>

<div class="triangle-left"> <；！--向左的三角--> </div>

<div class="triangle-right"> <；！--向右的三角--> </div>

2、然后新建一个css文件style.css，并在index.html中引入，引入代码：<link rel="stylesheet" type="text/css" href="style.css">

3、先做向上的三角形，这里有两种写法，大家可以参考下。在css文件中输入以下代码：

第一种： .triangle-up {

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-bottom:30px solid #fff;

}

第二种：.triangle-up {

width:0;

height:0;

border:30px solid transparent;

border-bottom-color:#fff;

}

4、接下来写向下的三角形，继续在css文件中输入以下代码：

.triangle-down {

width:0;

height:0;

border-left:20px solid transparent;

border-right:20px solid transparent;

border-top:20px solid #0066cc;

}

5、然后是向左的三角形，代码为：

.triangle-left {

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid yellow;

}

6、最后是向右的三角形，代码为：

.triangle-right {

width:0;

height:0;

border-top:50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 50px solid green;

}

css三角形怎么写

转载请注明出处育才学习网 » css三角形怎么写

怎么用css画三角形 css怎么写一个三角形 用html和css写三角形
知识

一年英文怎么写

阅读(476)

本文主要为您介绍一年英文怎么写，内容包括一年英语怎么说，“一年”的英文怎么写，一年用英语怎么写。One year 一年a year ago 一年以前

知识

生曰快乐用数字怎么写

阅读(355)

本文主要为您介绍生曰快乐用数字怎么写，内容包括生日快乐用数字怎么表示，生日快乐用数字怎么说，生日快乐用数字怎么表达。九宫格键盘方式生日快乐对应的是祝你生日快乐84268426524946天天开心7447447

知识

初中语文积累本怎么写

阅读(283)

本文主要为您介绍初中语文积累本怎么写，内容包括初中语文积累笔记怎样写，初中语文积累都写些什么，初中语文积累。今年刚高考完，给你点意见吧。1，初中语文很重要，这点你要清楚，你初中语文是高中语文的基础。2，语文语法类的东西个人认为没有记的必

知识

捉贼的贼怎么写

阅读(682)

本文主要为您介绍捉贼的贼怎么写，内容包括贼喊捉贼贼，贼（）（）贼填成语，老总说要我写一篇文章,晕死,以捉贼写一篇文章要怎么写,大家教。贼喊捉贼zéi hǎn zhuō zéi【解释】做贼的人喊捉贼。比喻坏人为了自己逃脱，故意制造混乱，转移目标，把别人说

知识

医生写的字怎么看

阅读(278)

本文主要为您介绍医生写的字怎么看，内容包括医生写的字怎么才能看懂，为什么医生写的字病人都看不懂，医生写的字怎么看。医生写的字一般是很难看懂的，也有很多医生的术语在上面，一般想要看懂医生的字，可以找行内人来解释，不是医学上的人很难读懂

知识

淋湿的拼音怎么写

阅读(1378)

本文主要为您介绍淋湿的拼音怎么写，内容包括淋湿的拼音是怎么写的，淋湿的拼音，淋湿两个字的拼音。xià yǔ下雨是一种自然景象，是地球上的水受到太阳光的照射后，就变成水蒸气被蒸发到空气中去了。水汽在高空遇到冷空气便凝聚成小水滴。这些

知识

评价医生的话怎么写

阅读(328)

本文主要为您介绍评价医生的话怎么写，内容包括评价一个好医生的语句，赞美医生最好的句子，医护人员的工作表现评语怎么写。1. 以心为灯，愿作生命的守护天使。2. 我赞美医生她们奉献的是一丝温情，一份关爱，一滴汗水，一份真情；她们奉献的是最最宝贵

知识

个人特长技能怎么写

阅读(288)

本文主要为您介绍个人特长技能怎么写，内容包括简历中的技能特长怎么写，个人求职简历技能特长怎么写，个人简历表中的技能特长怎么写。原发布者：wc1508001特长怎么写 你的个人资料 待人真诚，做事有上进心，头脑灵活，接受能力强。处事自信、认真、

知识

大四毕业论文怎么写

阅读(299)

本文主要为您介绍大四毕业论文怎么写，内容包括大四毕业论文怎么写，大四毕业论文如何写，大四的毕业论文怎么写。首先，确定毕业论文的题目，有的导师会给题目，有的导师会给范围，有的导师完全让你去自己选。那么，给范围的，可以在百度搜索某某学科毕业

知识

山字笔顺怎么写呀

阅读(367)

本文主要为您介绍山字笔顺怎么写呀，内容包括山笔顺怎么写山的笔画顺序，山字笔顺怎么写，山字的笔顺怎么写。山的笔顺：竖、竖折/竖弯、竖。

知识

全民k歌的个性签名怎么写

阅读(338)

本文主要为您介绍全民k歌的个性签名怎么写，内容包括全民k歌签名大全，全民K歌个人签名怎么写，全民K歌个人签名怎么写。全民k歌签名推荐：吹过清风 喝过烈酒 终究也给了你自由2、你一直都是安分守己 所以你也一路被抛弃3、我超喜欢一无所有的感

知识

英语歌用英语怎么写

阅读(289)

本文主要为您介绍英语歌用英语怎么写，内容包括英语歌用英文怎么写，英语歌单词怎么写，我今天学了一首新的英语歌用英语怎么写。Now, let me sing an English song for you.now翻译为：接下来；现在。let me翻译为：让我s

知识

取名字用英语怎么说

阅读(407)

本文主要为您介绍取名字用英语怎么说，内容包括取名字英文怎么说，起名字用英语怎么说，英文名怎么写。你好，如果你是按中文名的拼音来写的举个例子，比如“李小红”这个名字，有两种写法，都正确，不过使用习惯不同1)Li Xiaohong （

知识

用两条绳子怎么编手链

阅读(279)

本文主要为您介绍用两条绳子怎么编手链，内容包括两根绳怎么编手链，怎么用两条绳子编手链视频，如何用两根细红绳编手链。手链绳的意义大家都知道啦，不仅辟邪还很漂亮。2113皮绳解释有韧性，效果也非常高档。皮绳的绳子代表平安、顺利的兆头，可以

知识

三角形眉笔怎么用

阅读(191)

本文主要为您介绍三角形眉笔怎么用，内容包括三角形眉笔怎么用，三角形眉笔怎么画眉毛，这种眉笔怎么用。没有经过修饰的眉毛，让整个人看起来很没精神，短小的眉毛也跟眼妆很不相称，可见眉妆之于整个妆容来说真的很重要。 2、为大家介绍一下需要用

知识

用css怎么写开关

阅读(225)

本文主要为您介绍用css怎么写开关，内容包括按钮用css怎么写，用css写一个简单的按钮，怎样用CSS写按钮样式。.button{width: 160px;height: 46px;font-size: 24px;color: white;backg

知识

jquerycss怎么写

阅读(250)

本文主要为您介绍jquerycss怎么写，内容包括jquery中css多个属性怎么写，jquery中css多个属性怎么写，jQuerycss多个样式属性怎么写。我这里本地测试过，这两种写法都是可以的，我这里测试过div及input的四种写法，为了效果明显，我将font-size设置为

知识

css进度条怎么写

阅读(209)

本文主要为您介绍css进度条怎么写，内容包括如何用纯CSS编写一个实用的进度条，怎么用css制作进度条，css3动态进度条有数字代码怎么写。写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。 2、接下来，添加样式为

知识

divcss里文字上下滚动的代码怎么写

阅读(274)

本文主要为您介绍divcss里文字上下滚动的代码怎么写，内容包括div中的文字滚动效果的代码怎么写,不要jsp的,就直接用属性或者更，div中有一行文字,怎么实现部分文字上下滚动效果，html中上下滚动的文字代码,举例。<HTML> <HEAD> <META http-eq

知识

css初始化代码怎么写

阅读(227)

本文主要为您介绍css初始化代码怎么写，内容包括CSS初始化的代码怎么写，CSS初始化的代码怎么写，css初始化代码怎么用。1. 最耗资源的，最简单的* { padding: 0; margin: 0; border: 0; } 2. 选择性初始化举例（综合）

知识

css样式导航按钮页面当前状态怎么写

阅读(242)

本文主要为您介绍css样式导航按钮页面当前状态怎么写，内容包括怎么写css能使导航保持被点击的状态（页面不需要跳转）js的也行,本，css导航被选中的状态怎么写，怎么用css样式来写导航按钮就是首页关于我们之类的鼠标移动到某位。<a href=＂#＂ class

知识

css样式中黑体怎么写

阅读(249)

本文主要为您介绍css样式中黑体怎么写，内容包括方正黑体简体在CSS里怎么写，在css里黑体字的属性怎么改，div+css中怎么设置字体黑体并用让它光滑。新建一个 文本吧后缀改为.css然后直接在xxx.css里写CSS样式*{font-family：＂黑体＂；font-size:12px

[/e:loop]