5

我正在尝试实现锥形<div>标签。也就是说，一侧的斜边（向内倾斜）和所有其他 3 侧的直边。

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

我试过了：

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

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

4

2 回答 2

7

这可以通过透明边框来实现！

CSS

#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;
}

HTML

  <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>
于 2013-08-28T19:27:40.833 回答
2

看起来 CSS 区域可能是http://www.adobe.com/devnet/html5/articles/css3-regions.html（向下滚动到标题为“环绕形状”的部分）。您可以将形状定义为多边形，然后就设置好了！不幸的是，形状区域支持目前是有限的，但根据您的用例，它可能会起作用。

于 2013-08-28T19:21:51.430 回答