Отрисовать фиругу. чтобы псевдоэлемент принимал её форму

Question

Отрисовать фиругу. чтобы псевдоэлемент принимал её форму

Рейтинг: 1Ответов: 1Опубликовано: 18.03.2023

.dropdawn-block__number {
  position: absolute;
  top: 0;
  left: 10px;
  padding: 6px 13px 13px 11px;
  clip-path: polygon(0% 0, 100% 0, 100% 70%, 0 100%);
  font-family: "Orchidea Pro";
  font-size: 50px;
  color: rgb(253, 167, 0);
  background: rgb(13, 43, 109);
}
.dropdawn-block__number::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  clip-path: polygon(0% 0, 100% 0, 100% 70%, 0 100%);
}

<span class="dropdawn-block__number">1</span>

 .dropdawn-block__number {
  position: absolute;
  top: 0;
  left: 10px;
  width: 50px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0% 0, 100% 0, 100% 73%, 0 100%);
  font-family: "Orchidea Pro";
  font-size: 50px;
  color: rgb(253, 167, 0);
  background: rgb(13, 43, 109);
}
.dropdawn-block__number::before,.dropdawn-block__number ::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: inherit;
  height: inherit;
  clip-path: inherit;
  background-color: inherit;
}
.dropdawn-block__number::before {
  transform: translate(-50%, -50.7%) scale(91%, 92%);
  background-color: rgba(255, 255, 255, 0.5);
}
 .dropdawn-block__number::after {
  content: attr(data-num);
  transform: translate(-9%, -9%) scale(87.5%, 89%);
}

                <span class="dropdawn-block__number" data-num="1"></span>

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Простейшая задача. Даже не пойму, где может возникнуть затруднение.

/* For example only --> */ body{margin:0;min-height:100vh;background-color:#fff;background-image:url('https://i.sstatic.net/m9NKc.png'),radial-gradient(#fff8,#000f);display:flex;justify-content:space-around;align-items:center;background-position:0 0;background-repeat:no-repeat;background-size:auto}

.dropdawn-block__number {
  font: bold 65vh/1.1em "Orchidea Pro", sans-serif; /* Size original - 320px */
  position: relative;
  width: 1em; height: 1.4375em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fda700;
  background-color: #0d2b6d;
  clip-path: polygon(0% 0, 100% 0, 100% 73%, 0 100%);
}
.dropdawn-block__number::before,
.dropdawn-block__number::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: inherit; height: inherit;
  clip-path: inherit;
  background-color: inherit;
}
.dropdawn-block__number::before {
  transform: translate(-50%, -50.7%) scale(91%, 92%);
  background-color: #8695b6;
}
.dropdawn-block__number::after {
  content: attr(data-num);
  transform: translate(-50%, -50.9%) scale(87.5%, 89%);
}

<span class="dropdawn-block__number" data-num="2"></span>

Варианты. Всё настраивается в родительском элементе (для наглядности вынес настройки в inline-стили):

/* For example only --> */ body{margin:0;min-height:100vh;background-color:#fff;background-image:url('https://i.sstatic.net/m9NKc.png'),radial-gradient(#fff8,#000f);display:flex;justify-content:space-around;align-items:center;background-position:0 0;background-repeat:no-repeat;background-size:auto}

.dropdawn-block__number {
  font-size: 320px; /* Масштаб элемента */
  font-family: 'Orchidea Pro', sans-serif;
  font-weight: bold;
  line-height: 1.1em;
  position: relative;
  width: 1em; height: 1.4375em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fda700; /* Цвет шрифта */
  background-color: #0d2b6d; /* Цвет заливки */
  clip-path: polygon(0% 0, 100% 0, 100% 73%, 0 100%);
}
.dropdawn-block__number::before,
.dropdawn-block__number::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: inherit; height: inherit;
  clip-path: inherit;
  background-color: inherit;
}
.dropdawn-block__number::before {
  transform: translate(-50%, -50.7%) scale(91%, 92%);
  background-color: #8695b6;
}
.dropdawn-block__number::after {
  content: attr(data-num);
  transform: translate(-50%, -50.9%) scale(87.5%, 89%);
}

<span style="font-size: 24px; color: #fff; background-color: #000;" class="dropdawn-block__number" data-num="1"></span>
<span style="font-size: 44px; color: #fa0; background-color: #0d2b6d;" class="dropdawn-block__number" data-num="2"></span>
<span style="font-size: 64px; color: #0ff; background-color: #080;" class="dropdawn-block__number" data-num="3"></span>
<span style="font-size: 84px; color: #00f; background-color: #f00;" class="dropdawn-block__number" data-num="4"></span>

Отрисовать фиругу. чтобы псевдоэлемент принимал её форму

Ответы