css - 如何使用css变换构建45度倒梯形?
问题描述
如何用css搭建一个45度倒梯形?
.inverted-trapezoid {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
padding: 1.5em 0em 1.5em 0em;
color: white;
height: 1em;
z-index: 0;
// margin: 3em;
}
.inverted-trapezoid::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: red;
border-bottom: none;
transform: perspective(9.5em) rotateX(-45deg);
transform-origin: bottom;
}
我们可以使用变换来制作倒梯形,但我们如何才能精确地制作 45 度呢?
解决方案
use clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 25% 100%);
for inverted trapezoid
<div class="Inverted-trapezoid"></div>
.Inverted-trapezoid{width:200px; height:200px;background:#000;margin-bottom:50px; margin-right:20px; clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 25% 100%);}
推荐阅读
- python - 如何随机打乱列表并以 5 项为一组提供
- python - 我需要如何训练 LSTM 网络才能预测不同长度的数组?
- list - 如何更新 Haskell 中的列表元素
- node.js - “nvm use 16.13.0”将返回此错误“退出状态 145:目录不为空”。
- git - SSH 与 Git 克隆
- python - 尝试创建一个执行简单统计计算的类,ValueError: invalid literal for int() with base 10: ''
- azure - SharePoint Online CData JDBC Databricks AD 已验证调用获取 HTTP 协议错误。500 服务器错误
- sql - AWS Timestream 查询不同的测量值
- node.js - "gulp serve" 将返回此错误 "ReferenceError: primordials is not defined"
- java - 如何判断列表是否已经加载?