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

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 版本

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 版本

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/

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