CSS outline轮廓线不是矩形的情况2D转换
CSS outline轮廓线不是矩形的情况2D转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>outline</title>
<style>
.container {
position: absolute;
top: 100px;
left: 100px;
width: 800px;
height: 600px;
background: #0ff;
}
.diamond {
position: absolute;
top: 200px;
left: 200px;
width: 500px;
height: 500px;
background: #f0f;
transform: skew(30deg,20deg);/*2d倾斜转换*/
outline: #000 solid 2px;
}
.pentagon {
position: absolute;
top: 50px;
left: 100px;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
.pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
</style>
</head>
<body>
<div class="container">
<div class="diamond"></div>
<div class="pentagon"></div>
</div>
</body>
</html>
转载于:https://my.oschina.net/af666/blog/874256