Question 44055 in Html Question posted in
Some basic documentation can be found here.

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

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.

enter image description here

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search