Element with corner and translucent background.

Question

I need to create a fluid shape with a cut off angle and border. The uniform should be able to sit on an unknown background. This in itself is not a problem, but I also need this element / s to be translucent.

Here is what I still have ...

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

This approach works when the element has a solid background, but as you can see, the square element used to create the cutting angle is clearly visible when using a translucent background. Can anyone think of a way around this?

JSFiddle version

Answer 1

For those interested here, how I did it.

Wrap .corner in another element with 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

You can use another element inside .corner , see example below:

 <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/

I edited your styles, some properties are overwritten and can be deleted. I mean, you can better understand what changes I made.