1px问题
发布于 2022年 01月 12日 23:33
一、只设置一条边
1、border-image
<body>
<div class="box">
</div>
</body>
</html>
<style>
.box {
width: 600px;
height: 600px;
background: yellow;
border-bottom: 100px solid black;
border-image: linear-gradient(to bottom, transparent 50%, black 50%) 0 0 100% 0;
}
</style>
2、伪元素+background-image
<body>
<div class="box">
</div>
</body>
</html>
<style>
.box {
width: 600px;
height: 600px;
background: yellow;
position: relative;
}
.box::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(to bottom, transparent 50%, black 50%);
}
</style>
3、伪元素+transform: scaleY(.5)
<body>
<div class="box">
</div>
</body>
</html>
<style>
.box {
width: 600px;
height: 600px;
background: yellow;
position: relative;
}
.box::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background: red;
transform: scaleY(.5);
}
</style>
二、四周设置
<body>
<div class="box">
</div>
</body>
</html>
<style>
.box {
width: 600px;
height: 600px;
background: yellow;
position: relative;
}
.box::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
transform-origin: 0 0;
border: 100px solid blue;
transform: scale(.5);
}
</style>