Html 如何创建具有倾斜边的长方体？
我试图制作一个带有倾斜边缘的Html 如何创建具有倾斜边的长方体？,html,css,Html,Css,我试图制作一个带有倾斜边缘的div盒子，但我似乎无法管理它 这就是我想要得到的： 这是一个彩色（非固体）背景 当前CSS： .infotop { display: inline-block; min-width: 30%; min-height: 10%; max-width: 50%; margin: auto; background
div .infotop {
display: inline-block;
min-width: 30%;
min-height: 10%;
max-width: 50%;
margin: auto;
background-color: rgba(0, 190, 190, 0.6);
color: white;
text-align: center;
padding: 10px;
padding-left: 30px;
padding-right: 30px;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2), 0 16px 60px 0 rgba(0, 0, 0, 0.19);
text-shadow: 2px 2px 4px #000000;
}
使用“渐变”来创建此选项：
.box{
显示：内联块；
填充：5px30px；
字体大小：25px；
颜色：#fff；
背景：
线性梯度（蓝色，蓝色）中心/计算（100%-40px）100%无重复，
线性渐变（至左下角，蓝色49%，透明50.5%）左/20px 100%无重复，
线性梯度（至右下角，蓝色49%，透明50.5%）右侧/20px 100%无重复；
}
身体{
背景：粉红色；
}
一些文本
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.trapezoid {
border-bottom: 100px solid blue; /* 100px is the height of the trapezoid */
border-left: 25px solid transparent; /* change angle by changing pixel value here*/
border-right: 25px solid transparent; /* change angle by changing pixel value here*/
transform: rotate(180deg); /* flip the trapezoid div */
height: 0;
width: 125px; /*width of the base */
}
.divtext
{
transform: rotate(180deg); /*this is not rotating the text for some reason*/
color: white; /* color of the text*/
}
</style>
</head>
<body>
<h2>Trapezoid CSS</h2>
<div class="trapezoid "><span class="divtext">Hello!</span></div>
</body>
</html>
.梯形{
边框底部：100px纯蓝色；/*100px是梯形的高度*/
左边框：25px实心透明；/*通过在此处更改像素值来更改角度*/
右边框：25px实心透明；/*通过在此处更改像素值来更改角度*/
变换：旋转（180度）；/*翻转梯形div*/
身高：0；
宽度：125px；/*底座宽度*/
}
.divtext
{
变换：旋转（180度）；/*这不是出于某种原因旋转文本*/
颜色：白色；/*文本的颜色*/
}
梯形CSS
你好