Html 使用CSS的锥形div_Html_Css

Html 使用CSS的锥形div

html css

Html 使用CSS的锥形div,html,css,Html,Css,我正在尝试实现一个锥形的标记。也就是说，一侧的斜边（向内倾斜）和所有其他3侧的直边我不确定是否可以单独使用CSS和HTML。我试过用谷歌搜索这个问题，但找不到任何解决办法我试过： -webkit-border-bottom-right-radius : 50px 650px; 其中650px是我的div的整个高度，但这给了我一个右下角位置的圆角，这是我不想要的。希望你们知道这个问题的答案，或者至少提出一个替代方案。看起来CSS区域可能（向下滚动到标题为“包裹形状”的部分）。您可以将形状定义

我正在尝试实现一个锥形的

标记。也就是说，一侧的斜边（向内倾斜）和所有其他3侧的直边

我不确定是否可以单独使用CSS和HTML。我试过用谷歌搜索这个问题，但找不到任何解决办法

我试过：

-webkit-border-bottom-right-radius : 50px 650px;

其中650px是我的div的整个高度，但这给了我一个右下角位置的圆角，这是我不想要的。希望你们知道这个问题的答案，或者至少提出一个替代方案。

看起来CSS区域可能（向下滚动到标题为“包裹形状”的部分）。您可以将形状定义为多边形，然后就可以了！不幸的是，成形区域支持目前是有限的，但根据您的使用情况，它可能会起作用。

CSS

HTML






请注意

新台词

不要重叠。

您真正想要实现的目标是什么？你为什么要使用

斜面

？你能发布你想要的输出的图像吗？你可以看看这个梯形图[en.wikipedia.org/wiki/梯形]，正如其中一条评论中提到的那样。这张图片有三条边成直角，一条是锥形的。这不是锥形的。这将创建一个第5面，而OP需要3个常规面，其中一个面与其他面不直/不一致。让我这样描述：想象一个正方形。现在，假设底部从右侧缩短。这会使右侧向内倾斜。我很欣赏答案，因为它达到了我在测试2中想要的形状。但是，我不能在

标记中添加元素，因为形状是边框。@madhead这是一个很好的把戏！Rijul，如果您想使用此方法，我认为您最好将内容覆盖在shape one顶部的另一个div中。@Rijul请参阅更新的plunk。您可以相对定位内容。然而，这个解决方案不是很好-你需要确保你的内容不会与div重叠。它可能适用于标题和标题，但不适用于用户生成的内容。非常好的技巧。谢谢由于Wayne之前的建议，我计划无论如何使用

div

重叠。谢谢你演示。

#test1 {
  border-top: 100px solid red;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;

  width: 300px;
}

#test2 {
  border-top: 100px solid red;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

#test3 {
  border-top: 100px solid red;
    border-right: 50px solid transparent;
    height: 100px;
    width: 100px;

    content: 'ds';
  z-index: -1; /* make it the background */
}

#test3 .content {
    position: relative;
    top: -100px;
    margin: 5px;
    float: left; /* wrap the text */
    clear: left; /* for demo */
    font-size: 1em;
    background-color: cyan;
}

  <body>
    <div id="test1">
    </div>

    <br/>

    <div id="test2">
    </div>

    <br/>
    <div id="test3">
      <div class="content">
        Watch for the<br>
        new lines. <br>
        Do not overlap.
      </div>
    </div>
  </body>