EN
CSS - create triangle figure
6 points
In this short article, we would like to show how in simple way create triangle figures using only CSS.
In this section, you can find practical example that shows how to create equilateral triangles.
Source code:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
margin: 10px;8
display: inline-block;9
}10
11
.triangle-up {12
width: 0; 13
height: 0; 14
border-left: 20px solid transparent;15
border-right: 20px solid transparent;16
border-bottom: 35px solid blue;17
}18
19
.triangle-down {20
width: 0; 21
height: 0; 22
border-left: 20px solid transparent;23
border-right: 20px solid transparent;24
border-top: 35px solid blue;25
}26
27
.triangle-left {28
width: 0; 29
height: 0; 30
border-top: 20px solid transparent;31
border-bottom: 20px solid transparent;32
border-right: 35px solid blue;33
}34
35
.triangle-right {36
width: 0; 37
height: 0; 38
border-top: 20px solid transparent;39
border-bottom: 20px solid transparent;40
border-left: 35px solid blue;41
}42
43
</style>44
</head>45
<body>46
<div class="triangle-up"></div>47
<div class="triangle-down"></div>48
<div class="triangle-left"></div>49
<div class="triangle-right"></div>50
</body>51
</html>Style template:
xxxxxxxxxx1
$size: 20px;2
$color: blue;3
4
.triangle-up {5
width: 0; 6
height: 0; 7
border-left: $size solid transparent;8
border-right: $size solid transparent;9
border-bottom: round(1.732050807568877 * $size) solid $color;10
}
