具有切角和半透明背景的元素

Question

我需要创建一个带有切角和边框的流体形状。该形状需要能够放置在未知背景上。这本身不是问题，但我还需要该元素的背景半透明。

以下是我目前的进展...

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    background: pink;
}

.sidebar-widget {
    border: 1px solid #44AAAB;
    border-right: none;
    border-bottom: none;
    position: relative;
    padding: 15px 0 0 15px;
    margin-bottom: 20px;
}

.sidebar-widget .inner {
    position: relative;
    padding: 15px 0 0 15px;
    left: -15px;
    top: -15px;
    background: #f2f2f2;
}

.sidebar-widget .inner:before {
    content: "";
    width: 100%;
    height: 15px;
    background: #f2f2f2;
    border: 1px solid #44AAAB;
    border-right: none;
    border-top: none;
    position: absolute;
    left: -1px;
    bottom: -16px;
}

.sidebar-widget .inner .content:after {
    content: "";
    width: 15px;
    height: 100%;
    background: #f2f2f2;
    border: 1px solid #44AAAB;
    border-left: none;
    border-bottom: none;
    position: absolute;
    right: -16px;
    top: -1px;
}

.corner {
    width: 22px;
    height: 22px;
    border-right: 1px solid #44AAAB;
    background: #f2f2f2;
    position: absolute;
    right: 4px;
    bottom: 4px;
    transform: rotate(45deg);
    z-index: 1;
}

.sidebar-widget.trans-bg .inner,
.sidebar-widget.trans-bg .inner:before,
.sidebar-widget.trans-bg .inner .content:after,
.trans-bg .corner {
    background: rgba(0,0,0,0.5);
}

<div class="sidebar-widget">
    <div class="corner"></div>
    <div class="inner">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tellus felis, faucibus id velit eget, auctor tristique ex. Pellentesque id dolor risus. Donec tincidunt, nisl id laoreet tristique, ligula magna placerat mi, id congue magna diam ut sem. Aenean ornare eros nec sapien porta, laoreet venenatis est lobortis.
        </div>
    </div>
</div>

<div class="sidebar-widget trans-bg">
    <div class="corner"></div>
    <div class="inner">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tellus felis, faucibus id velit eget, auctor tristique ex. Pellentesque id dolor risus. Donec tincidunt, nisl id laoreet tristique, ligula magna placerat mi, id congue magna diam ut sem. Aenean ornare eros nec sapien porta, laoreet venenatis est lobortis.
        </div>
    </div>
</div>

这种方法适用于元素具有纯色背景的情况，但是当使用半透明背景时，可以看到用于创建切角的正方形元素明显可见。有没有办法解决这个问题？

JSFiddle版本

- Turnip

---

我认为，对于这种效果，最简单的方法可能是使用 border-image。 - CBroe

这里有几种实现你所描述的布局的方法：带有切割边缘、边框和透明背景的 Div。 - web-tiki

嗨@web-tiki，我不确定我是如何忽略那个问题的。我尝试了你的解决方案，但不幸的是它依赖于一个固定的高度，而我没有。同时，还有一些渲染边框宽度的问题，这是我无法接受的。 - Turnip

@uʍopǝpısdn 我建议使用链接问题中提到的这种方法。 - web-tiki

该解决方案也无法处理高度不固定的元素。 - Turnip

Answer 1

如果有人感兴趣，这就是我最终的做法。

使用overflow: hidden;将.corner包装在另一个元素中。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    background: pink;
}

.sidebar-widget {
    border: 1px solid #44AAAB;
    border-right: none;
    border-bottom: none;
    position: relative;
    padding: 15px 0 0 15px;
    margin-bottom: 20px;
}

.sidebar-widget .inner {
    position: relative;
    padding: 15px 0 0 15px;
    left: -15px;
    top: -15px;
    background: #f2f2f2;
}

.sidebar-widget .inner:before {
    content: "";
    width: 100%;
    height: 15px;
    background: #f2f2f2;
    border: 1px solid #44AAAB;
    border-right: none;
    border-top: none;
    position: absolute;
    left: -1px;
    bottom: -16px;
}

.sidebar-widget .inner .content:after {
    content: "";
    width: 15px;
    height: 100%;
    background: #f2f2f2;
    border: 1px solid #44AAAB;
    border-left: none;
    border-bottom: none;
    position: absolute;
    right: -16px;
    top: -1px;
}

.corner-mask {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.corner {
    width: 22px;
    height: 22px;
    border-right: 1px solid #44AAAB;
    background: #f2f2f2;
    position: absolute;
    right: 4px;
    bottom: 4px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}

.sidebar-widget.trans-bg .inner,
.sidebar-widget.trans-bg .inner:before,
.sidebar-widget.trans-bg .inner .content:after,
.trans-bg .corner {
    background: rgba(0,0,0,0.5);
}

<div class="sidebar-widget">
    <div class="corner-mask">
        <div class="corner"></div>
    </div>
    <div class="inner">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tellus felis, faucibus id velit eget, auctor tristique ex. Pellentesque id dolor risus. Donec tincidunt, nisl id laoreet tristique, ligula magna placerat mi, id congue magna diam ut sem. Aenean ornare eros nec sapien porta, laoreet venenatis est lobortis.
        </div>
    </div>
</div>

<div class="sidebar-widget trans-bg">
    <div class="corner-mask">
        <div class="corner"></div>
    </div>
    <div class="inner">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tellus felis, faucibus id velit eget, auctor tristique ex. Pellentesque id dolor risus. Donec tincidunt, nisl id laoreet tristique, ligula magna placerat mi, id congue magna diam ut sem. Aenean ornare eros nec sapien porta, laoreet venenatis est lobortis.
        </div>
    </div>
</div>

JSFiddle version

- Turnip

Answer 2

您可以在.corner内使用另一个元素，如下面的示例：

<style>
    .corner, .corner_inner { /* added .corner_inner to your styles */
        width: 22px; 
        height: 22px; 
        border-right: 1px solid #44AAAB; 
        background: #f2f2f2; 
        position: absolute; 
        right: 4px; 
        bottom: 4px; 
        transform: rotate(45deg); 
        z-index: 1;
    }

    .trans-bg .corner {background: transparent} /* overwrite the background above */

    .trans-bg .corner_inner { /* set background and position for inner element */
        width: 11px; 
        height: 11px; 
        right: -1px; 
        bottom: 0; 
        background: rgba(0,0,0,0.5);
    }
</style>

<div class="sidebar-widget trans-bg">
    <div class="corner">
        <div class="corner_inner"></div>
    </div>
    ...
</div>

http://jsfiddle.net/6Lyph6zj/3/

我已经编辑了你的样式，一些属性被覆盖并可以删除。我的意思是，你可以更好地理解我所做的更改。

- pavel

---

嗨@panther。您的小提琴显示如下...http://s12.postimg.org/iu2le8nrh/cut_corner_copy.png - Turnip

@uʍopǝpısdn：嗯，奇怪。在Safari中，它看起来与您的代码完全相同。我无法进行更多测试，但使用内部元素（带有背景）并将透明背景设置为.corner的方法应该是正确的。 - pavel