Question

我一直在努力实现这种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;
  }
}

提前感谢您的帮助！

Ĵ

Answer 1

尝试使用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>

Answer 2

您可以简单地使用clip-path来创建形状，而不是使用transform:skew()和伪元素的大量代码。

.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>

（browser support）

日历形状（div内的三角形，边框半径）

2 个答案: