1.需求:平行四边形边框,四边形里面的文字水平垂直居中显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap1 {
display: inline-block;
border: 1px solid red;
transform: skew(45deg);
padding: 0 10px;
}
.txt1 {
transform: skew(-45deg);
}
.wrap2 {
position: relative;
display: inline-block;
padding: 0 10px;
}
.wrap2::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #fff;
transform: skew(45deg);
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 方法一-->
<div class="wrap1">
<div class="txt1">这是文字1</div>
</div>
<!-- 方法二-->
<div class="wrap2">
这是文字2
</div>
</body>
</html>
介绍两种方法:
方法一:父子元素,父元素设置transform:rotate(45deg),里面的子元素transform:rotate(-45deg);
方法二:使用伪元素
效果图如下:
2.需求:在菱形里面放一张图片,图片无压缩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
.warp1 {
width: 376.18px;
height: 376.18px;
border: 1px solid red;
transform: rotate(45deg);
margin: 10%;
position: relative;
overflow: hidden;
}
.img1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotate(-45deg);
}
</style>
</head>
<body>
<div class="warp1">
<img src="./1.png" alt="" class="img1">
</div>
</body>
</html>
注意点:图片需是正方形图片,菱形的长度=(图片长度/2)*√2,这样才能保证图片刚好在菱形中完整显示出来;例如图片长度2,那么菱形长度=(2/2)*√2。
效果图如下
3.需求:1/4圆,1/2圆,椭圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
.div1{
display: inline-block;
width: 60px;
height: 60px;
border: 1px solid red;
}
.left-t {
border-radius: 100% 0 0 0;
}
.right-t {
border-radius:0 100% 0 0;
}
.left-b {
border-radius: 0 0 0 100% ;
}
.right-b {
border-radius:0 0 100% 0;
}
.div2{
display: inline-block;
border: 1px solid red;
}
.left {
width: 30px;
border-radius: 30px 0 0 30px;
height: 60px;
}
.right {
width: 30px;
height: 60px;
border-radius: 0 30px 30px 0;
}
.top {
width: 60px;
height: 30px;
border-radius: 30px 30px 0 0;
}
.bottom {
width: 60px;
height: 30px;
border-radius:0 0 30px 30px ;
}
.top-circle {
border-radius: 50% 50% 0 0;
}
.bottom-circle {
border-radius: 0 0 50% 50%;
}
.left-circle{
border-radius: 50% 0 0 50%;
}
.right-circle {
border-radius: 0 50% 50% 0;
}
.ellipse{
border-radius: 50%/100% 100% 0 0;
}
</style>
</head>
<body>
<p>左上边是1/4圆</p>
<div class="left-t div1"></div>
<p>右上边是1/4圆</p>
<div class="right-t div1"></div>
<p>左下边是1/4圆</p>
<div class="left-b div1"></div>
<p>右下边是1/4圆</p>
<div class="right-b div1"></div>
<p>左边是1/2圆</p>
<div class="left div2"></div>
<p>右边是1/2圆</p>
<div class="right div2"></div>
<p>上边是1/2圆</p>
<div class="top div2"></div>
<p>下边是1/2圆</p>
<div class="bottom div2"></div>
<p>上边是1/2圆,下边是长方形</p>
<div class="top-circle div1"></div>
<p>下边是1/2圆,上边是长方形</p>
<div class="bottom-circle div1"></div>
<p>左边是1/2圆,右边是长方形</p>
<div class="left-circle div1"></div>
<p>右边是1/2圆,左边是长方形</p>
<div class="right-circle div1"></div>
<p>上边是椭圆</p>
<div class="ellipse div1"></div>
</body>
</html>
注意点:border-radius属性,展开式属性,必须使用空格分隔。同个属性可用/分开,分别表示水平半径和垂直半径。
效果图:
3.需求:单边阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin:0;
padding:0;
}
p{
margin:10px 0 5px 0;
}
div {
width:50px;
height:50px;
background:#ccc;
}
.top {
box-shadow: 0 -5px 2px -2px rgba(103, 95, 95, 0.6);
}
.bottom {
box-shadow: 0 5px 2px -2px rgba(103, 95, 95, 0.6);
}
.left {
box-shadow: -5px 0 2px -2px rgba(103, 95, 95, 0.6);
}
.right {
box-shadow: 5px 0 2px -2px rgba(103, 95, 95, 0.6);
}
.top-r {
box-shadow: 5px -5px 6px -2px rgba(103, 95, 95, 0.6);
}
.top-b {
box-shadow: 0 -5px 2px -2px rgba(103, 95, 95, 0.6), 0 5px 2px -2px rgba(103,95,95,0.6);
}
</style>
</head>
<body>
<p>上边阴影</p>
<div class="top"></div>
<p>下边阴影</p>
<div class="bottom"></div>
<p>左边阴影</p>
<div class="left"></div>
<p>右边阴影</p>
<div class="right"></div>
<p>上右边阴影</p>
<div class="top-r"></div>
<p>上下边阴影</p>
<div class="top-b"></div>
</body>
</html>
注意点:box-shadow: X Y 模糊半径R1 扩张半径R2 颜色值;
X是会生成一个相对于元素向右偏移的阴影,如果想向右偏移,则X为负值;
Y是会生成一个相对于元素向下偏移的阴影,如果想向上偏移,则为正值;
R1是模糊半径,R1越大,模糊的半径越大,那么阴影颜色就越淡;
R2是扩张半径,R2越大,阴影的半径越大,写单边阴影时,R2=-R1;
box-shadow支持多属性,属性之间用","分开,例如写上下属性时,需用到box-shadow: 0 -5px 2px -2px rgba(103, 95, 95, 0.6), 0 5px 2px -2px rgba(103,95,95,0.6);
效果图: