css skew element and get inner rounded border top

by

I would do it like this:

.header {
  border-top: 20px solid blue;
  height:100px;
  position: relative;
  overflow: hidden;
}
.header:before,
.header:after {
  content: "";
  vertical-align:top;
  display: inline-block;
  transform-origin: top right;
  transform: skew(-40deg);
}

.header:before {
  height: 100%;
  width: 50%;
  border-radius: 0 0 20px 0;
  background: blue;
}

.header:after {
  height: 20px;
  width: 20px;
  margin-left:-1px;
  background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}


/*to illustrate different values of skew*/
.header:before,
.header:after {
  animation:change 2s linear infinite alternate;
}

@keyframes change{
  from{transform: skew(0deg);}
  top{transform: skew(-40deg);}
}
<div class="header"></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. Control the dashed border stroke length and distance between strokes
  7. How to make 3-corner-rounded triangle in CSS
  8. CSS transparent curved shape with two rounded sides
  9. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  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 can I create a “tooltip tail” using pure CSS?
  15. background image, linear gradient jagged edged result needs to be smooth edged
  16. Segments in a circle using CSS3
  17. How to make a circle around content using CSS?
  18. Adjacent divs with angled borders? [duplicate]
  19. Blocky gradient effect in CSS3
  20. How to create an irregular square shape in css?
  21. How to create a radial menu in CSS?
  22. Arrow Box with CSS
  23. Filling water animation
  24. Make CSS3 triangle with linear gradient
  25. Creating an Isoceles Trapezoid shape
  26. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  27. Make table cells square
  28. Creating a droplet like border effect in css
  29. Div with cut out edges, border and transparent background
  30. Double curved shape

Leave a Comment