5
Ich muss eine flüssige Form mit einer abgeschnittenen Ecke und einem Rand erstellen. Die Form muss in der Lage sein, auf einem unbekannten Hintergrund zu sitzen. Das ist an sich kein Problem, aber ich brauche auch den Hintergrund dieses Elements/s, um halbdurchsichtig zu sein.Element mit geschnittener Ecke und halbdurchsichtigem Hintergrund
Hier ist, was ich bisher habe ...
* {
-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>Dieser Ansatz funktioniert, wenn das Element soliden Hintergrund hat, aber wie Sie das Quadrat Element sehen verwendet, um den Cut-off zu schaffen Die Ecke ist deutlich sichtbar, wenn ein halbdeckender Hintergrund verwendet wird. Kann mir jemand einen Weg vorstellen, um dies zu umgehen?
würde ich sagen, wahrscheinlich am einfachsten 'border-image' für diese Art von Wirkung zu verwenden. – CBroe
Es gibt mehrere Möglichkeiten, Ihr hier beschriebenes Layout zu erreichen: [Div mit ausgeschnittenen Kanten, Rahmen und transparentem Hintergrund] (http://stackoverflow.com/questions/12030835/div-with-cut-out-edges-border-and -transparent-background) –
Hi @ web-tiki bin mir nicht sicher, wie ich diese Frage übersehen habe. Ich habe Ihre Lösung versucht, aber leider beruht sie auf einer festen Höhe, die ich nicht habe. Es gibt auch einige Probleme mit der Darstellung von Randbreiten, mit denen ich nicht leben kann – Turnip