3

有一个客户要求 CSS 中的不规则角。这甚至是一回事吗？到目前为止，我已经尝试过 CSS 三角形（http://css-tricks.com/snippets/css/css-triangle/），但没有尝试过。

https://dl.dropbox.com/u/4031469/irreg.png

我想我可能不得不遗憾地用图像来做这件事……除非你们都知道有什么方法可以把它拉下来。

主要参数： 至少需要高度灵活，最好宽度也灵活，但不是必需的。当前的解决方案：顶部封盖器可能延伸到盒子上方，足以使角效果在辅助盒子上起作用……下部下降块完全对齐，推到下面。

到目前为止我最接近的尝试（使用图像作为顶部）：https ://dl.dropbox.com/u/4031469/fs.html

4

3 回答 3

3

从http://nicolasgallagher.com/pure-css-speech-bubbles/窃取

chrome中jsfiddle的屏幕截图

http://jsfiddle.net/aBYHX/

编辑：-第二次尝试。更简单，更少的 css 并且与您的示例图片在同一侧。http://jsfiddle.net/aBYHX/1/ 

<div class="content">
    <p class="triangle-isosceles">This only needs one HTML element.</p>
    <p class="irregular-corner"> ---- </p>
</div>​

CSS： 

.content
{
    padding: 15px;
}
.triangle-isosceles, .irregular-corner 
{
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#000;
    background:#f3961c;
}

.triangle-isosceles:after {
    content:"";
    position:absolute;
    bottom: 0; 
    right: 0; 
    border-width: 25px 50px 0 0; 
    border-style: solid;
    border-color: transparent white;
    /* reduce the damage in FF3.0 */
    display:block; 
}


.irregular-corner:before
{
    content:"";
    position:absolute;
    top: -25px; 
    right: 0px; 
    border-width: 25px 50px 0 0;
    border-style:solid;
    border-color:transparent #f3961c;
    /* reduce the damage in FF3.0 */
    display:block; 
}
​
于 2012-08-17T04:46:08.380 回答
1

根据我的研究，在 CSS3 下，这种外观的细节使它成为不可能。

这种外观有一个微妙的渐变和内部发光，我们已经使用inset盒子阴影完成了......这似乎不适用于之前的 css 三角形效果。

CSS 掩码看起来可能在许多情况下都能提供帮助，但在需要的情况下box-shadow: inset，图像是唯一的选择。

今天我使用 -webkit-clip-path 属性来完成这项工作，该属性具有不同的浏览器支持。

.entry{
  background-color: blue;
  width: 500px;
  height: 200px;
  -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 40%, 100% 100%, 0 100%);
  -webkit-transform: translateY(-30px);
  top: 10px;
  left: 0;

}

body{
  background-color: green; 
}

http://codepen.io/randallb/pen/tmlAH

于 2012-08-21T19:36:46.237 回答
0

Nora Brown 写了一篇关于CSS3 边框图像属性的可爱文章。值得快速阅读...

如果你担心跨浏览器的支持（你应该担心），那么提供一个优雅的后备。也许只是有一个没有“疯狂角落”的边界就可以作为一种后备情况，也许不是。

这种方法不是跨浏览器的，但有些人觉得“渐进式”很好。

于 2012-08-17T04:29:59.203 回答