What is the best way to achieve this pentagon with CSS?

Question

I am trying to make this design with CSS since I will put a website and the title of each post, depending on its length, the background will adapt but I would like the triangle below to do so too, so I still can't do that.

So far I have managed to do something similar with CSS. Here is my code:

.pentagon {
  display: inline-block;
  width: fit-content;
  min-width: 50px;
  min-height: 50px;
  background-color: #b6ce52;
  position: relative;
  padding: 2px 10px 2px 10px;
  font-weight: bold;
}

.pentagon:before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(360deg);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #b6ce52;
}

<div class="pentagon">
  <p>Title of post</p>
</div>

How could I adapt my code or what values would I have to add to achieve the example layout? I would greatly appreciate your help.

Investigate CSS clip-path and use % values so the shape adjusts. — A Haworth, Mar 14 '23 at 08:46
Isn't your code very close to the desired design? Just tweak the left and right borders to make it bigger and wider — Joshua, Mar 14 '23 at 08:48

Giammo · Answer 1 · 2023-03-14T08:50:53.450

I think you can solve your problem by playing a bit with the clip-path (polygon) CSS property.

.pentagon {
  display: inline-block;
  width: fit-content;
  width: auto;
  height: auto;
  clip-path: polygon(50% 60%, 100% 50%, 100% 0%, 0% 0%, 0% 50%);
  background-color: #b6ce52;
  position: relative;
  padding: 2px 10px;
  font-weight: bold;
}
.pentagon p {
  line-height: 0;
  font-size: 45px;
  margin-bottom: 50%;
}

<div class="pentagon">
  <p>Title of post</p>
</div>

Here you can find the documentation with examples: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

This is a useful clip-path generator instead: https://10015.io/tools/css-clip-path-generator

David Thomas · Answer 2 · 2023-03-14T09:52:05.747

You could, in addition to existing answers, use the conic-gradient() background-image as below, with explanatory comments in the CSS:

/* simple reset to normalise CSS defaults, and
   sizing: */

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
}

.pentagon {
  /* setting CSS custom properties for use in the
     gradient: */
  --pentagonColor: lime;
  --pentagonBackgroundColor: transparent;
  /* using this to have the element be four times
     greater on its inline-axis than its block
     axis: */
  aspect-ratio: 4;
    background-image:
      conic-gradient(
        /* starting the gradient from -80 degrees from
           the default 0deg (perpendicular to the inline
           axis), all other degrees within the conic
           gradient are relative to this offset "zero" point,
           we also position this on the horizontal center
           and vertical bottom: */
        from -80deg at center bottom,
        /* from 0 degrees (this is offset as stated above),
           until 160 degrees we use the --pentagonColor: */
        var(--pentagonColor) 0deg 160deg,
        /* from 160deg to 360 degrees we use the custom
           --pentagonBackgroundColor property: */
        var(--pentagonBackgroundColor) 160deg 180deg
      );
  display: inline-block;
  margin-block: 0.5rem;
  margin-inline: 0.5rem;
  min-height: 3em;
  text-align: center;
}

h2 {
  font-size: 1.5rem;
  font-weight: 800;
  padding-block-end: 0.25em;
  padding-inline: 0.25em;
}

<div class="pentagon">
  <h2>Lorem ipsum dolor sit amet.</h2>
</div>

<div class="pentagon" style="--pentagonBackgroundColor: yellow;">
  <h2>Lorem.</h2>
</div>

<div class="pentagon" style="--pentagonColor: red;">
  <h2>Dolor sit amet.</h2>
</div>

<div class="pentagon">
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quam animi, vero quae ipsam odit.</h2>
</div>

What is the best way to achieve this pentagon with CSS?

2 Answers2