Div with Cut Out Edges, Border and Transparent Background

Div with cut out edges, border and transparent background

Unfortunately you cannot have a pseudo-element added to a pseudo-element (i.e. :after:after{} will not work) - with a complex shape like yours, you might have to cheat a little and rely on pseudo-elements of its children.

<div class="fancy-box">
    <h2>Title</h2>
    <p>Content</p>
</div>

.fancy-box{/*container, top+bottom borders*/}
.fancy-box:before{/*left-top "square" corner*/}
.fancy-box:after{/*right-bottom "square" corner*/}
.fancy-box>p:before{/*left-bottom "dog ear" border*/}
.fancy-box>p:after{/*right-top "dog ear" border*/}
.fancy-box>h2:before{{/*left-bottom "dog ear" background*/}
.fancy-box>h2:after{/*right-top "dog ear" background*/}

Again, this fiddle shows you how it would work with solid colors (reasonably well, although I don't like the "thinner" angles) - but this would fail when you apply opacity. Your best would probably be around having "dog ears" made into pre-rendered semitransparent PNGs, for extra credit you could base64-encode them.

The "solution" above is a complete semantic horror though - you may have better luck using multiple backgrounds with pre-rendered graphics.

Div with cut out edges, border and transparent background, how to add the cut out edges to the upper left and bottom right corner as well?

Seems that simplifying the transform code works. Just change those 4 lines, and voila.

Precisely, this:

div:before {
  -webkit-transform-origin:100% 0;
  transform-origin:100% 0;
}
div:after {
  -webkit-transform-origin:0 100%;
  transform-origin:0 100%;
}

becomes this:

div:before {
  -webkit-transform-origin: 100%;
  transform-origin: 100%;
}
div:after {
  -webkit-transform-origin: 0;
  transform-origin: 0;
}

See it here: http://jsfiddle.net/ryanpcmcquen/pxm3beyL/

Full code:

div {  position: relative;  width: 50%;  height: 300px;  margin: 10% auto;  background: rgba(0, 0, 0, 0.7);  border-top: 6px solid rgba(0, 0, 0, 0.8);  border-bottom: 6px solid rgba(0, 0, 0, 0.8);}div:before,div:after {  content: '';  position: absolute;  top: -6px;  width: 20%;  height: 100%;}div:before {  right: 100%;  background: inherit;  border-top: 6px solid rgba(0, 0, 0, 0.8);  border-left: 6px solid rgba(0, 0, 0, 0.8);  border-bottom: 6px solid rgba(0, 0, 0, 0.8);  -webkit-transform-origin: 100%;  transform-origin: 100%;  -webkit-transform: perspective(1px) rotateY(-0.15deg);  transform: perspective(1px) rotateY(-0.15deg);}div:after {  left: 100%;  border-top: 6px solid rgba(0, 0, 0, 0.8);  border-right: 6px solid rgba(0, 0, 0, 0.8);  border-bottom: 6px solid rgba(0, 0, 0, 0.8);  border-left: none;  background: inherit;  -webkit-transform-origin: 0;  transform-origin: 0;  -webkit-transform: perspective(1px) rotateY(0.15deg);  transform: perspective(1px) rotateY(0.15deg);}/*following just for demo */
body,html {  height: 100%;  margin: 0;}body {  background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat;  background-size: cover;  color: #fff;  font-size: 1.2em;  font-family: arial;}

<div>  <h1>Title here</h1>
  <p>some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here...</p></div>

How to cut box corner Using CSS with transparent background?

Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner).

This gradient will look the same regardless of .card width and height.

body {  background: purple;}
.card {  width: 200px;  height: 200px;  background: linear-gradient(135deg, transparent 20px, white 20px);}

<div class="card"></div>

Cut Corners using CSS

If the parent element has a solid color background, you can use pseudo-elements to create the effect:

div {    height: 300px;    background: red;    position: relative;}
div:before {    content: '';    position: absolute;    top: 0; right: 0;    border-top: 80px solid white;    border-left: 80px solid red;    width: 0;}

<div></div>

css cut-out border/shape around element

Yes, this is basically impossible. That's why I am trying to provide an answer :-)

My solution will not work on IE, and limits you to use primary colors in the elements. As far as I know, it's the only way to get this result.

The trick is to use a blend mode, that translates gray into transparent. And the borders of the element will be gray, so will show the underlying background

.bkg { width: 200px; height: 200px; border: solid 1px black; background-image: repeating-linear-gradient(45deg, white 0px, lightblue 40px);}
.button { width: 100px; height: 100px; border-radius: 20%; border: solid 10px gray; position: absolute; font-size: 80px;}
#bt1 { left: 40px; top: 20px; background-color: red;}
#bt2 { left: 80px; top: 90px; background-color: rgb(255,0,255);}
.panel { position: absolute; top: 0px; width: 200px; height: 200px; mix-blend-mode: hard-light;}

<div class="bkg"></div><div class="panel">    <div class="button" id="bt1">-1-</div>    <div class="button" id="bt2">-2-</div></div>

Element with cut corner and semi-opaque background

For anyone who is interested here is how I ended up doing it.

Wrap the .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>

How to cut a corner with CSS when background image is necessary?

You may use before/after element to make the bottom part like this :

.profile {position:relative;display:inline-block;margin:50px;border:1px solid #000;border-bottom:none;width:100px;height:200px;background:#ccc;}.profile:after {content:" ";position:absolute;border:1px solid #000;height:20px;width:80px;bottom:-20px;right:-1px;border-top:0;border-left:0;background:#ccc;}.profile:before {content:" ";position:absolute;border-bottom:1px solid #000;height:29px;width:29px;transform:rotate(45deg);bottom:-15px;left:6px;background:#ccc;}

<div class="profile"></div>