Html 侧边倾斜的形状（响应性）
我正在尝试创建一个形状，如下图所示，只在一侧（例如，底部）有一个倾斜的边，而其他边保持笔直 我尝试使用下面给出的边界方法代码，但我形状的尺寸是动态的，因此我无法使用此方法 .形状{ 位置：相对位置； 高度：100px； 宽度：200px； 背景：番茄； } .形状：之后{ 位置：绝对位置； 内容：； 高度：0px； 宽度：0px； 左：0px； 底部：-100px； 边框宽度：50px 100px； 边框样式：实心； 边框颜色：番茄透明； } 一些内容Html 侧边倾斜的形状（响应性）,html,css,responsive-design,css-shapes,Html,Css,Responsive Design,Css Shapes,我正在尝试创建一个形状，如下图所示，只在一侧（例如，底部）有一个倾斜的边，而其他边保持笔直 我尝试使用下面给出的边界方法代码，但我形状的尺寸是动态的，因此我无法使用此方法 .形状{ 位置：相对位置； 高度：100px； 宽度：200px； 背景：番茄； } .形状：之后{ 位置：绝对位置； 内容：； 高度：0px； 宽度：0px； 左：0px； 底部：-100px； 边框宽度：50px 100px； 边框样式：实心； 边框颜色：番茄透明； } 一些内容 有许多方法可以创建仅在一侧具有倾斜边的形
有许多方法可以创建仅在一侧具有倾斜边的形状 以下方法无法支持问题中已提到的动态尺寸： 边框三角形方法，边框宽度为像素值。 角度语法为45度、30度等的线性渐变。 下面介绍了支持动态大小的方法 方法1-SVG SVG可以通过使用多边形或路径来生成形状。下面的代码段使用了多边形。所需的任何文本内容都可以放置在形状的顶部 $document.readyfunction{ $'increasew-vector'。单击，函数{ $'.vector'.css{ “宽度”：“150px”， “高度”：“100px” }; }; $'increaseh-vector'。单击，函数{ $'.vector'.css{ “宽度”：“100px”， “高度”：“150px” }; }; $'increaseb-vector'。单击，函数{ $'.vector'.css{ “宽度”：“150px”， “高度”：“150px” }; }; } div{ 浮动：左； 高度：100px； 宽度：100px； 利润率：20px； 颜色：米色； 过渡：所有1； } .向量{ 位置：相对位置； } svg{ 位置：绝对位置； 利润率：10px； 顶部：0px； 左：0px； 身高：100%； 宽度：100%； z指数：0； } 多边形{ 馅料：番茄； } .vector>span{ 位置：绝对位置； 显示：块； 填充：10px； z指数：1； } .vector.top>span{ 身高：50%； 宽度：100%； 顶部：calc40%+5px；/*角度区域的大小+缓冲区*/ 左：5px； } .vector.bottom>span{ 身高：50%； 宽度：100%； 顶部：5px； 左：5px； } .vector.left>span{ 宽度：50%； 身高：100%； 左：50%；/*角度区域的大小*/ 顶部：5px； } .vector.right>span{ 宽度：50%； 身高：100%； 左：5px； 顶部：5px； } /*只是为了演示*/ 身体{ 背景：50%50%的径向梯度圆，aliceblue，steelblue； } 多边形：悬停，跨度：悬停+svg>多边形{ 填充：钢蓝； } .btn容器{ 位置：绝对位置； 顶部：0px； 右：0px； 宽度：150px； } 钮扣{ 宽度：150px； 边缘底部：10px； } .向量，左{ 明确：两者皆有； } 一些内容 一些内容 一些内容 一些内容 增加宽度 增加高度 双管齐下 我尝试使用边界方法，但我形状的尺寸是动态的，因此我无法使用此方法 方法7-视口单元边界重排 是CSS3中的一个伟大创新。虽然通常可以使用百分比值来动态化属性，但不能对边框宽度进行动态化 而是使用视口单位，以及与视口标注相比的对象大小 注意：百分比值指的是父对象，而不是窗口的视口可见区域 要测试该方法，请启动以下代码段完整页面，并在水平和垂直方向调整其大小 .形状{ 位置：相对位置； 高度：20vh； 宽度：40vw； 背景：番茄； } .形状：之后{ 位置：绝对位置； 内容：； 左：0px； 右：0px； 顶部：20vh； 边框宽度：10vh 20vw； 边框样式：实心； 边框颜色：番茄rgba0,0,0,0 rgba0,0,0； } 一些内容的灵感来自Andrea Ligios在本页上文中提出的方法7-视口单位 在调整导航窗口的宽度时，我使用水平单位表示height-too-height:10vw以保持梯形中的给定比例。我们可以将此方法称为7b-视口宽度 此外，使用两个嵌套的div，而不是一个和：after选择器，可以更好地调整文本内容样式，在我看来，例如文本对齐等 德拉普先生{ 位置：相对位置； 利润率：10px40vw； 宽度：0； 高度：10vw； 边界：无； 右边框：20vw实心f22； 边框底部：5vw实心透明； } .dtcont{ 位置：绝对位置； 宽度：20vw； 高度：10vw； 文本对齐：居中； 颜色：fff；/*美观*/ } 一些内容
在最新版本的chrome中，它看起来有些参差不齐。真的！我想浏览器引擎仍然需要一些时间来平滑渲染。Firefox在使用像素而不是视口单位时也有这个问题，但是可以通过使用rgba、、0而不是透明来解决。幸运的是w
e现在有其他选择；@嗨！让我知道我的答案有什么问题，这样我就可以编辑或删除它，如果这是有意义的！我不是专家，但在我看来，这可以应用于许多页面，处理较长的文本内容，仅取决于宽度：