如下图所示,我正在尝试使div从底部和顶部弯曲或成三角形,但我不知道该怎么做。我只是尝试了几次,但是无法达到目的。那么如何在psuedo之后使用它呢?伪装无关紧要,但我想知道怎么做?
这是我的代码:
body{
background:lightblue;;
}
.block{
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
}
<div class="block"></div>
答案 0 :(得分:4)
使用变换和透视图的想法,您将获得边界,边界半径和渐变:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
您还可以添加阴影并轻松更改渐变:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
filter:drop-shadow(0 0 5px #000);
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(35deg, blue, red);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
答案 1 :(得分:3)
您可以使用clip-path
进行操作。有一个非常简单的工具可以帮助您:https://bennettfeely.com/clippy/。
我已经为您举例说明了您的内容
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
-webkit-clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
}
<div class="block"></div>
答案 2 :(得分:2)
这可以通过在::before
和::after
伪元素上使用CSS三角形来完成!我给它们涂上了鲜艳的颜色,这样您就可以知道发生了什么,但是让它们看起来像您想要的那样应该很容易。
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
position: relative;
}
.block::before,
.block::after{
display: block;
content: '';
position: absolute;
border: 150px solid transparent;
}
.block::before {
border-top-width: 0;
border-bottom-width: 25px;
border-bottom-color: red;
top: -25px;
}
.block::after {
border-bottom-width: 0;
border-top-width: 25px;
border-top-color: green;
bottom: -25px;
}
<div class="block"></div>
答案 3 :(得分:0)
调整尺寸以适合您的确切形状要求。这样可以提供与您想要的东西接近的东西。
body{
background:lightblue;;
}
.block{ position:
relative; width:200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);:
}
}
.block:before
{ content: '';
position: absolute;
top: 20%;
bottom: 20%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
<div class="block"></div>