Форма календаря (треугольник внутри div с радиусом границы)

Я изо всех сил пытался понять эту форму CSS:

goal

Я использовал CSS-преобразования и псевдоэлементы для достижения своей цели и получил неплохой результат, но он не идеален. Углы должны быть менее острыми. Также стоит отметить, что отрезанная часть треугольника должна быть прозрачной.

Вот что я придумал: https://jsfiddle.net/e1xzjghL/11/

HTML

<div class="date">
    <div class="date__month">April</div>
    <div class="date__day">20</div>
</div>

CSS

.date {
  position: relative;
  display: inline-block;
  border-radius: .25rem;
  background: black;
  background-image: radial-gradient(top left, rgba(255,255,255,0.3), transparent);
  background-image: -webkit-radial-gradient(top left, rgba(255, 255, 255, 0.2), transparent);
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 1;
  padding: .4rem;
  min-width: 37px;

  //centering
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

  &__day {
    font-size: 2.4rem;
  }

  &::before, &::after {
    content: '';
    position: absolute;
    display: inline-block;
    border: 18.5px solid black;
    bottom: -18.5px;
    transform: rotate(.25turn) scaleX(.2);
    z-index: -1;
  }
  &::before {
    left: 0;
    border-color: transparent transparent black transparent;
  }
  &::after {
    right: 0;
    border-color: black transparent transparent transparent;
  }
}

Заранее спасибо за вашу помощь !

J

Я бы использовал фоновое изображение с прозрачным треугольником внизу изображения, чтобы добиться желаемого эффекта и внешнего вида.

user7837718 11.04.2018 14:15

Разве нельзя просто добавить радиус границы к элементам «после» и «перед»?

Jamie Buttons Coulter 11.04.2018 14:20

@Beth Я бы предпочел не использовать изображение, если это возможно, спасибо за предложение.

jor1s 11.04.2018 15:07

@JamieButtonsCoulter, нет, он плохо отображается, потому что треугольная часть уже построена с помощью трюка с границами.

jor1s 11.04.2018 15:07

@ jor1s Кажется, мне подходит? jsfiddle.net/e1xzjghL/14

Jamie Buttons Coulter 11.04.2018 15:14

@JamieButtonsCoulter Молодцы! Думаю, я установил радиус границы не в те углы ... вероятно, из-за поворота. Мне интересно, какое решение мне выбрать сейчас, с вашим мне не нужен дополнительный div для моего прозрачного радиального фона .. Спасибо за совет!

jor1s 11.04.2018 15:33
0
6
221
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуйте использовать transform:skew() для нижней части вместо трюка с границами и примените немного border-radius

body {
  background: rebeccapurple;
  height: 100vh;
}

html {
  font-size: 10px;
}

* {
  box-sizing: border-box;
}

.date {
  position: relative;
  display: inline-block;
  border-radius: .25rem;
  background: black;
  background-image: radial-gradient(top left, rgba(255, 255, 255, 0.3), transparent);
    background-image: -webkit-radial-gradient(top left, rgba(255, 255, 255, 0.2), transparent);
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 1;
  padding: 1rem;
  min-width: 37px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
}

.date__day {
  font-size: 2.4rem;
}

.date::before,
.date::after {
  content: '';
  position: absolute;
  width: 50%;
  background: #0e0e0e;
  left: 0;
  top: 48px;
  bottom: -5px;
  border-radius: 0 0 0 6px;
  transform: skewY(-15deg);
  z-index: -1;
}

.date::after {
  right: 0px;
  left: auto;
  transform: skewY(15deg);
  border-radius: 0 0 6px 0;
}
<div class="date">
  <div class="date__month">April</div>
  <div class="date__day">20</div>
</div>

Спасибо за быстрый ответ! Так углы выглядят намного лучше. Я возился с вашим ответом, но, помимо z-index: -1 на псевдоэлементах, они, похоже, не отстают от основного элемента. Связано ли это с тем, что наклон трансформирует беспорядок по оси Z? Элемент ::after также переполняет основной div в Chrome, но не в Firefox.

jor1s 11.04.2018 14:42

(Я исправил переполняющийся элемент, установив для ширины основного элемента число, кратное 2, думаю, это были проблемы с округлением).

jor1s 11.04.2018 14:51

@ jor1s на самом деле z-index:-1 на псевдоэлементах помещает их за содержимым div, вот как это работает ... и для части переполнения да, вы правы, это ширина основного элемента, потому что я использовал 50% в ширине псевдоэлемента ...

Bhuwan 11.04.2018 14:53

да, я только что понял, что веду себя глупо насчет z-индекса, фон должен быть в фоновом режиме. Это проблема, так как мне нужен белый прозрачный радиальный градиент на основном черном фоне.

jor1s 11.04.2018 14:57

Я добавил дополнительный div для радиального градиента. Я бы предпочел этого не делать, но я не могу найти другого способа с использованием перекоса. Я приму твой ответ. Большое спасибо!

jor1s 11.04.2018 15:13

@ jor1s просто попробуйте изменить верхнее значение :before и :after. Ответ обновляется градиентным фоном ...

Bhuwan 11.04.2018 15:19

Идеально ! Большое спасибо, я чувствую, что это чище, чем уловка с границами. Ваше здоровье

jor1s 11.04.2018 15:37

Вместо того, чтобы использовать много кода для transform:skew() и псевдоэлементов, вы можете просто использовать clip-path для создания своей формы.

.date {
  border-radius: .3rem;
  background: radial-gradient(circle at 0 0, #777, #000);
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-family: Helvetica, Arial;
  font-weight: bold;
  line-height: 1;
  padding: .5rem .5rem 1rem .5rem;
  margin: 0 auto;
  width: 52px;
  -webkit-clip-path: polygon(0 0,0 100%,6% 100%,50% 92%,94% 100%,100% 100%,100% 0);
  clip-path: polygon(0 0,0 100%,6% 100%,50% 92%,94% 100%,100% 100%,100% 0);
}

.date__day {
  font-size: 2.5rem;
}
<div class="date">
  <div class="date__month">Mars</div>
  <div class="date__day">27</div>
</div>

(поддержка браузера)

Другие вопросы по теме