Css 与 数学

菱形图片实现

image

transform实现

1
2
3
<div class="outer">
<img src="" class="inner">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.outer{
margin: 200px;
width: 100px;
height: 100px;
transform: rotate(45deg);
overflow: hidden;
background: yellowgreen;
}

.inner{
height: 100%;
transform: rotate(-45deg) scale(1.414);
}

根据勾股定理,旋转后的图片宽高等于原有宽高的1.414倍

clip-path实现

1
<img src="" class="inner">
1
2
3
4
5
.inner{
width: 100px;
height: 100px;
clip-path: polygon(50% 0,100% 50%,50% 100%, 0 50%);
}

边框内圆⾓实现

image

两个元素实现

1
2
3
<div class="outer">
<div class="inner"></div>
</div>

方法 1 利用 box-shadow

1
2
3
4
5
6
7
8
9
10
11
12
.outer {
height: 200px;
width: 200px;
margin: 50px;
border: 10px solid red;
}
.inner{
height: 100%;
background: blue;
border-radius: 20px;
box-shadow: 0 0 0 8px red;
}

方法 2 利用 background

1
2
3
4
5
6
7
8
9
10
11
12
13
.outer{
margin: 100px;
width: 200px;
height: 200px;
background: red;
padding: 20px;
}
.inner{
width: 100%;
height: 100%;
background: blue;
border-radius: 5px;
}

一个元素实现

利用 outline 和 box-shadow 实现

1
2
3
4
5
6
7
8
9
.outer {
height: 200px;
width: 200px;
margin: 50px;
background: red;
border-radius: 20px;
outline: 10px solid blue;
box-shadow: 0 0 0 8px blue;
}
1
<div class="outer"></div>

折角效果

image

1
2
3
4
5
6
7
8
9
.outer{
width: 200px;
height: 200px;
padding: 10px;
margin: 50px;
background: linear-gradient(-135deg,transparent 15px, red 0) 100% 0 no-repeat,
linear-gradient(-135deg,transparent 15px, green 0);
background-size:20px 20px, auto;
}
1
2
3
<div class="outer">
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>