当前位置：懂科普 >

综合知识

> css三角形怎么写

css三角形怎么写

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

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

css三角形怎么写

<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; text-align:center; color:#fff; background-color:red;">；等边三角形</div>

<div style="width:200px; text-align:center; color:#fff; background-color:red;">；等腰直角三角形</div>

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

<meta charset="utf-8">无标题<a href="https://dongkepu.com/tags-odd4-0.html" title="查看更多文档的文章" target="_blank" >文档</a><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
  • 文章版权属于文章作者所有，转载请注明 https://dongkepu.com/zonghezhishi/8ed4zm.html

相关内容

热门文章

猜你喜欢

专题
推荐文章
最新文章