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 version

Answer 1

对于任何对此感兴趣的人，我最终都是这样做的。

使用.corner

将overflow: hidden;换行到另一个元素中

* {
  -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

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/

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

元素与切角和半透明背景

2 个答案: