Question 137040 in CSS Question posted in
Some basic documentation can be found here.

CSS: Use Polygon Clip Path with a point above 100%

so I’m trying to draw a polygon with the clip-path function in CSS.
I want a rectangle, which has a min-height of 90px and a arrow at the bottom side.

All I need is a extra polygon-point outside the 100% height.

I try:

.child {
  width: 100%;
  min-height: 90px;
  max-height: none;
  clip-path: polygon(
      0 0,
      40% 0,
      50% 20%,
      60% 0,
      100% 0,
      100% 100%,
      60% 100%,
      50% calc(100% + 10px),
      40% 100%,
      0 100%
  );
}

So this one doesn’t run. It cannot add the 10px to the 100% height.

50% calc(100% + 10px),

Has someone a better idea?

Tags:

2

Answers


  1. 0

    Instead of exceeding the area just reduce all by 10px: use 100% instead of 100% + 10px and use 100% - 10px instead of 100%. Optionally increase the min-height by 10px

    .child {
  width: 100%;
  min-height: 90px;
  background: yellowgreen;
  clip-path: polygon(
      0 0,
      40% 0,
      50% 20%,
      60% 0,
      100% 0,
      100% calc(100% - 10px),
      60% calc(100% - 10px),
      50% 100%,
      40% calc(100% - 10px),
      0 calc(100% - 10px)
  );
}
    <div class="child"></div>

    otherwise, make the bottom arrow using a pseudoelement so you can exceed the area

    .child {
  width: 100%;
  min-height: 90px;
  position: relative;
  background: yellowgreen;
  clip-path: polygon(
      0 0,
      40% 0,
      50% 20%,
      60% 0,
      100% 0,
      100% calc(100% + 10px),
      0 calc(100% + 10px)
  );
}

.child::after {
   content: "";
   background: inherit;
   position: absolute;
   top: 100%;
   left: 40%;
   height: 10px;
   width: 20%;
   clip-path: polygon(0 0, 100% 0, 50% 100%);
}
    <div class="child"></div>
    Login or Signup to reply.
  2. 0

    A playground that implements the general formula for Fabrizio’s answer:

    div {
  /* Play with these */
  --ah-mh-ratio: 1 / 5;
  --aw-w-ratio: 1 / 5;
  --min-height: 90px;
  --width: 100%;
  --background: #ddd;
  
  /* ...but not these */
  --actual-min-height: calc(var(--min-height) / (1 - var(--ah-mh-ratio)));
  --arrow-height: calc(100% * var(--ah-mh-ratio));
  --arrow-width: calc(100% * var(--aw-w-ratio));
  --half-width: calc(var(--arrow-width) / 2);
  --left-leg-x: calc(50% - var(--half-width));
  --right-leg-x: calc(50% + var(--half-width));
  --base-y: calc(100% - var(--arrow-height));
  
  /* Implementation */
  min-height: var(--actual-min-height);
  width: var(--width);
  background: var(--background);
  clip-path: polygon(
    0 0,
    var(--left-leg-x) 0,
    50% var(--arrow-height),
    var(--right-leg-x) 0,
    100% 0,
    100% var(--base-y),
    var(--right-leg-x) var(--base-y),
    50% 100%,
    var(--left-leg-x) var(--base-y),
    0 var(--base-y)
  );
}
    <div></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search