前言
本文内容是基础入门选手的示例。供娱乐参考。有其他图形可以补充。
前置知识
1、使用border-radius 属性可以制作精美的曲线图形
| 1 | 2 | 3 |
|---|---|---|
| 4 | 5 | 6 |
样式如下
.container {
background-color: black;
display: flex;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-around;
width: 700px;
height:500px
}
.main{
width: 200px;
height:200px;
background-color: chartreuse;
}
.box1{
border-radius: 25% 10%;
}
.box2{
border-radius: 10% 30% 50% 70%;
}
.box3{
border-radius: 10% / 50%;
}
.box4{
border-radius: 10px 100px / 120px;
}
.box5{
border-radius: 50% 20% / 10% 40%;
}
.box6{
border-radius: 25px;
}
html部分
<div class="container">
<div class="main box1"></div>
<div class="main box2"></div>
<div class="main box3"></div>
<div class="main box4"></div>
<div class="main box5"></div>
<div class="main box6"></div>
</div>
2、transparent不是属性是属性值 代表透明色，
就像是红色、绿色、武装色一样，是颜色值，
在做移动端时，按钮比较小，就可以给它添加一个透明色transparent ,增大可触面积
宽高为0的盒子，通过设置border大小 和颜色值为transparent 透明色就可以实现三角形绘制。
3、CSS transform属性
允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
下面开始画其他几何图形了
正方形
基础实例，后面的代码会只贴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>
body {
background-color: black;
}
.square{
height: 200px;
width: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
三角形
分别为上下左右指向的等腰三角形 css
.box{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.triangle {
width: 0;
height: 0;
}
.up {
border-bottom: 200px solid indigo;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
}
.down {
border-top: 200px solid paleturquoise;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
}
.left {
border-right: 200px solid lemonchiffon;
border-bottom: 100px solid transparent;
border-top: 100px solid transparent;
}
.rigth {
border-left: 200px solid green;
border-bottom: 100px solid transparent;
border-top: 100px solid transparent;
}
html
<div class="box">
<div class="triangle up"></div>
<div class="triangle down"></div>
<div class="triangle left"></div>
<div class="triangle rigth"></div>
</div>
长方形
在上面正方形的实例中改宽度即可
css
.rectangle{
height: 200px;
width: 400px;
background-color: yellowgreen;
}
html
<div class="rectangle"></div>
梯形
css
.trapezium {
height: 0;
width: 200px;
border-bottom: 200px solid orange;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
background-color: black;
}
html
<div class="trapezium"></div>
菱形
css
/*下面注释部分为浏览器兼容前缀，如果你的浏览器不能正常显示，就要加前缀*/
.diamand{
width: 300px;
height: 300px;
background-color: plum;
/* -moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg); */
transform: rotate(-45deg);
/* -moz-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%; */
transform-origin: 0 100%;
margin: 150px 0 0 300px;
}
html
<div class="diamand"></div>
平行四边形
css
.parallelogram {
width: 400px;
height: 200px;
background: #8734f7;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
margin-left: 20%;
}
html
<div class="parallelogram"></div>
圆形
css
.cricle{
height: 200px;
width: 200px;
background-color: #7FFFD4;
border-radius: 100%;
}
html
<div class="cricle"></div>
椭圆
css
.oval {
height: 200px;
width: 400px;
background-color: deepskyblue;
border: none;
border-radius: 50%;
}
/* 或者这样*/
.oval {
height: 200px;
width: 400px;
background-color: deepskyblue;
-moz-border-radius: 400px/200px; /* 浏览器兼容 */
-webkit-border-radius: 400px/200px; /* 浏览器兼容 */
border-radius: 400px/200px;
}
html
<div class="oval"></div>
五角星
css
#star {
width: 0;
height: 0;
margin: 100px 10px;
color: red;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
/* background-color: black; */
}
#star:before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
/* background-color: black; */
}
#star:after {
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: red;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
/* background-color: black; */
}
html
<div id="star"></div>
那如何用css做个五星红旗呢？一起来实现吧。
