Div with cut out edges, border and transparent background

by

If you think in 3d, you can use the perspective and rotateX() properties to alter only one or two angles of an element.

This will allow you to style pseudo elements of the container to give them the desired shape and cut out the top right and bottom left corners.

You can also give the desired borders to the shape, (see following demo) :

DEMO

Output :

CSS shape with cut out edges and border

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% 0;
  transform-origin: 100% 0;
  -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 100%;
  transform-origin: 0 100%;
  -webkit-transform: perspective(1px) rotateY(0.15deg);
  transform: perspective(1px) rotateY(0.15deg);
}
<div></div>

More Related Contents:

  1. Speech bubble with arrow
  2. How can I show only corner borders?
  3. Invert rounded corner in CSS?
  4. Transparent hollow or cut out circle
  5. How to skew element but keep text normal (unskewed)
  6. Inset border-radius with CSS3
  7. How to make 3-corner-rounded triangle in CSS
  8. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  9. Responsive CSS triangle with percents width
  10. Is it possible to create an angled corner in CSS?
  11. Wave (or shape?) with border on CSS3
  12. How to draw a circle sector in CSS?
  13. How to create a curve on the top of a background?
  14. How to create multi-color border with CSS?
  15. How can I create a “tooltip tail” using pure CSS?
  16. background image, linear gradient jagged edged result needs to be smooth edged
  17. Segments in a circle using CSS3
  18. How to make a circle around content using CSS?
  19. Adjacent divs with angled borders? [duplicate]
  20. Blocky gradient effect in CSS3
  21. How to create an irregular square shape in css?
  22. How to create a radial menu in CSS?
  23. Arrow Box with CSS
  24. Filling water animation
  25. Make CSS3 triangle with linear gradient
  26. Creating an Isoceles Trapezoid shape
  27. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  28. Make table cells square
  29. how to handle ‘double opacity’ of two overlapping divs
  30. Double curved shape

Leave a Comment