这就是我们用css所做出的三角形。
一.如何用css做出三角形?
首先三角形使用css做的,不是用html做的,所以我们不能用div,span,i那些行或者块来改。而是用css中的边框来制作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们将div的宽和高全部设为0,这样div就相当于一个点。我们再把这个点的边框border放大,这样这个点就变成了一个方形,我们依次把top,right,left的border-color设为透明transparent。只剩下bottom的边,这样就画出了一个三角形。
二.如何画出不是等腰的三角形?
就像我们开头放的那张图片一样。
<style>
.box {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0 ;
}
</style>
<body>
<div class="box"></div>
</body>
border颜色方面不变,我们只需要将top的width设为较大的值,要把显示的三角形的角的方向设为较小的width,其他的设为0,这样就能显示出不规则的三角形了。
三.如何一个用这种三角形。
在一般页面中,经常遇到小三角套在矩形上形成指示栏。
第一种:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0 ;
}
.price {
width: 160px;
height: 24px;
border: 1px solid red;
margin: 0 auto;
line-height: 24px;
}
.ms {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
font-weight: 900;
}
.ms i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.yj {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="price">
<span class="ms">1650
<i></i>
</span>
<span class="yj">2400</span>
</div>
</body>
</html>
第二种:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角制作</title>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
.span {
position: absolute;
right: 150px;
top: -20px;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-bottom-color: blue;
}
</style>
</head>
<body>
<div class="box">
<span class="span"></span>
</div>
</body>
</html>
两种的三角形都十分好画,只是要把他们嵌在矩形块上或者里面,我们要利用position来进行位移(子绝父相)。