我正在使用順風 css，但我想匯入我在視頻中看到的一些卡片。我知道我可以在課堂上使用 after: 屬性，但是當我已經在 css 上使用它時，這是浪費時間。
這張卡在沒有順風的情況下可以完美運行，但是當我添加順風 CSS 時，:after 的一部分不起作用。我嘗試將 !important 添加到屬性中，但它仍然不起作用。
它如何顯示順風：
在沒有順風的情況下如何顯示：
我的代碼：
.container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
transform: skewY(-10deg);
}
.container .card {
position: relative;
width: 300px;
height: 400px;
background: white;
transition: 0.5s;
}
.container .card:before {
content: "";
position: absolute;
top: -15px;
left: 0;
width: 100%;
height: 15px;
background-color: #ddc700;
transform-origin: bottom;
transform: skewX(45deg);
transition: 0.5s;
}
.container .card:after {
content: "";
position: absolute;
top: -15px;
left: -15px;
width: 15px;
height: 50%;
background-color: #ddc700;
transform-origin: left;
transform: skewY(45deg);
transition: 0.5s;
border-bottom: 200px solid #d9d9d9;
}
.container .card:hover {
transform: translateY(-40px);
}
.container .card .imgBx {
position: relative;
width: 300px;
height: 200px;
background-color: #c6b200;
display: flex;
align-items: center;
flex-direction: column;
}
.container .card .imgBx img {
max-width: 100px;
}
.container .card .imgBx h3 {
position: relative;
color: black;
margin-top: 10px;
}
.container .card .content {
position: relative;
width: 100%;
height: 200px;
padding: 20px;
color: black;
background: white;
text-align: center;
}
.container .card .content:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 400px;
background: linear-gradient(transparent, transparent, gray);
transform-origin: bottom;
transform: skewX(45deg);
transition: 0.5s;
z-index: -1;
}
.container .card:hover .content:before {
transform: translateY(40px) skewX(45deg);
filter: blur(5px);
opacity: 0.5;
}
.container .card:nth-child(1) {
z-index: 3;
}
.container .card:nth-child(2) {
z-index: 2;
}
.container .card:nth-child(3) {
z-index: 1;
}
@media (max-width: 414px) {
body {
overflow: auto;
}
.card {
width: 80%;
margin-bottom: 50px;
}
.container {
padding-top: 200px;
position: relative;
left: 15%;
top: 80%;
}
.container .card {
padding-bottom: 40px;
}
.container .card:hover {
transform: translateY(-25px);
}
}<head>
<!-- Styles -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col h-screen bg-black">
<div class="flex justify-center items-center text-center min-h-screen align-middle py-5 mb-3">
<div class="container">
<div class="card">
<div class="imgBx">
<h3>PUMP & DUMP</h3>
<br/>
<img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
cupiditate ullam animi fuga impedit odio dignissimos ab cum?
</div>
</div>
<div class="card">
<div class="imgBx">
<h3>PREVENTAS</h3>
<br/>
<img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
cupiditate ullam animi fuga impedit odio dignissimos ab cum?
</div>
</div>
<div class="card">
<div class="imgBx">
<h3>PASIVOS</h3>
<br/>
<img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
cupiditate ullam animi fuga impedit odio dignissimos ab cum?
</div>
</div>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
你的問題是高度只有 50%
你需要讓它像這樣
.container .card:after {
content: "";
position: absolute;
top: -15px;
left: -15px;
width: 15px;
height: 100%; /*Should change here from 50% to 100%*/
background-color: #ddc700;
transform-origin: left;
transform: skewY(45deg);
transition: 0.5s;
border-bottom: 200px solid #d9d9d9;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/443712.html