用html和css写三角形

2026-04-20 08:46:01位置：首页 > 用html和css写三角形

1. css三角形怎么写

css三角形怎么写

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三角形怎么写

转载请注明出处育才学习网 » 用html和css写三角形

知识

罗梅芬用日文怎么写(罗钰潇日语怎么写)

阅读(21431)

本文主要为您介绍罗梅芬用日文怎么写，内容包括伊蕾娜日语怎么写，王雪菲用日文怎么说，张佳怡在日语中怎么写啊怎么读啊。罗 ら ラ ra钰 ぎょく ギョク gyoku潇 しょう シヨウ shou第一列：日语汉字，写法同汉字，都要用繁体，这三个都挺难写的，看

知识

邓先生的英文怎么写(1~40的英文怎么说)

阅读(10449)

本文主要为您介绍邓先生的英文怎么写，内容包括“邓先生”用英语怎么写，1~40的英文怎么说，漂亮英文beautiful缩写怎么写。1 one 2 two 3 three 4 four 5 five 6 six 7 seven 8 eight 8 nine 10 te

知识

一个人布满皱纹怎么写(描写人物皱纹的句子)

阅读(9523)

本文主要为您介绍一个人布满皱纹怎么写，内容包括描写人物皱纹的句子，描写人物皱纹的句子，皱纹怎么描写。、老人脸上布满了皱纹，那一条条曲折不均的像是墙上斑驳的印迹，爬满了面容，留下了岁月的痕迹。2、外祖父是一位年过六旬的白发老人。在他

知识

登录接口怎么写(php登录的接口怎么写)

阅读(7769)

本文主要为您介绍登录接口怎么写，内容包括php登录的接口怎么写，网页登陆接口怎么做，网站登录接口程序怎么做。PHP 接口 接口 使用接口（interface），你可以指定某个类必须实现哪些方法，但不需要定义这些方法的具体内容。我们可以通过int

知识

档案奖惩情况怎么写(奖惩情况怎么写)

阅读(9607)

本文主要为您介绍档案奖惩情况怎么写，内容包括奖惩情况怎么写，个人简历及奖惩情况怎么填写，个人简历里面奖惩情况怎么写。在简历里的“奖励”部分，列出与你所获得的并与你的求职目标相关的荣誉、奖励和奖金。你既可以按时间顺序排列，也可以按

知识

头孢克肟拼音怎么写(头孢克肟的肟念什么)

阅读(8010)

本文主要为您介绍头孢克肟拼音怎么写，内容包括头孢克肟片全名拼音，头孢克肟片全名拼音，头孢克肟的肟念什么。肟[wò] ：是含有羰基的醛、酮类化合物与羟胺作用而生成的有机化合物，可以参与许多有机化学反应，例如经典的Beckmann重排就是肟为底

知识

一库搜用日语怎么写(日语一库是什么意思)

阅读(8001)

本文主要为您介绍一库搜用日语怎么写，内容包括日语大神来,看动漫里的主人公说一句：恰,一库搜这是什么意思，一库一库；一搜库这两个日语是什么意思怎么写，看片都有“一库”（日语）是什么意。一库的意思就是“出发，出去”的意思。日语「行く」的音译

知识

外租无人机广告怎么写(植保无人机广告语)

阅读(7006)

本文主要为您介绍外租无人机广告怎么写，内容包括求一个无人机创意广告词谢谢巨友们了，求一关于无人机的广告标语，求一关于无人机的广告标语我们公司是做无人机的,新成立的公司,求。DJI大疆创新研发的的MG-1农业植保机专为农村作业环境设计，

知识

河南话que怎么写(河南话的nenna怎么写)

阅读(6539)

本文主要为您介绍河南话que怎么写，内容包括que怎么写，河南话的nenna怎么写，que怎么写。尿一壶（niào yī hú）关系密切，观点一致。例：“他俩今天尿一壶啦。”●尿（niào）⑴、从尿道排泄的液体。⑵、排泄小便。⑶、不放

知识

国学经文的论文怎么写(国学征文该怎么写)

阅读(7120)

本文主要为您介绍国学经文的论文怎么写，内容包括国学征文该怎么写，弟子规的400论文，关于国学经典的征文怎么写。“子曰：“温故而知新，可以为师”……小时，总是觉得国学就是没用的，古人写的话，我们还需要背，每次老师教给我们时，我总是会让思想开一

知识

化学实验总结怎么写(化学实验报告小结怎么写)

阅读(5399)

本文主要为您介绍化学实验总结怎么写，内容包括化学实验总结怎么写，化学实验报告小结怎么写，化学实验小结怎么写。化学实验报告的书写： 一般情况下化学实验报告是根据实验步骤和顺序从七方面展开来写的： 1.实验目的：即本次实验所要达到的目标或

知识

蝴蝶豌豆拼音怎么写(豌豆的拼音是什么)

阅读(5833)

本文主要为您介绍蝴蝶豌豆拼音怎么写，内容包括蝴蝶怎么拼音的，豌豆的拼音是什么，蝴蝶的拼音是什么。豌豆的拼音是[wān dòu]。豌豆是豆科一年生攀援草本，高0.5-2米。全株绿色，光滑无毛，被粉霜。叶具小叶4-6片，托叶心形，下缘具

知识

海绵宝宝用英文怎么说(海绵宝宝用英文怎么说)

阅读(6515)

本文主要为您介绍海绵宝宝用英文怎么说，内容包括海绵宝宝用英语怎么说，海绵宝宝用英文怎么说，海绵宝宝英文名是什么。1. SPONGEBOB SQUAREPANTS 近期很夯的一步卡通影片《海绵宝宝》（SpongeBob SquarePants）是一系

知识

茶盏怎么用(茶盏在茶道中干嘛用)

阅读(5426)

本文主要为您介绍茶盏怎么用，内容包括茶盏怎么用我要写一篇200字左右的茶盏的使用说明,求指教，茶盏在茶道中干嘛用，问一下斗笠盏如何使用现在是不是很少有人使用它,它的意义。苏东坡的名句＂从来佳茗似佳人＂，典型地代表了唐宋及以后的文人墨客，

知识

thinkpad小红点怎么用(怎么学习使用thinkpad小红点)

阅读(7589)

本文主要为您介绍thinkpad小红点怎么用，内容包括怎么学习使用thinkpad小红点，thinkpad小红点怎么用，求教：THINKPAD的小红点使用方法。Thinkpad 小红点最高效的使用方法为：左手拇指按左键，无操作时在左键待命2、右手拇指按右键，同时兼按空格键及