日历形状（带边框半径的 div 内的三角形）答案

【问题标题】：Calendar Shape (Triangle inside div with border-radius)日历形状（带边框半径的 div 内的三角形）
【发布时间】：2018-04-15 01:18:28
【问题描述】：

我一直在努力实现这个 CSS 形状：

我一直在使用 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;
  }
}

提前感谢您的帮助！

【问题讨论】：

我会使用背景图片，图片底部有透明三角形，以达到想要的效果和外观。
你能不能只在元素之后、之前添加一个边框半径？
@Beth 如果可能，我宁愿不使用图片，谢谢您的建议。
@JamieButtonsCoulter，不，它渲染得不好，因为三角形部分已经用边框技巧构建了。
@jor1s 对我来说看起来不错？ jsfiddle.net/e1xzjghL/14

标签： css css-shapes

【解决方案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>

【讨论】：

感谢您的快速回答！这样，角落看起来好多了。我在摆弄你的答案，但除了伪元素上的z-index: -1 之外，它们似乎并没有落后于主要元素。是否与倾斜变换与 z 轴混淆的事实有关？ ::after 元素也在 Chrome 中溢出了主 div，但在 Firefox 中没有。
（我已经通过将主元素宽度设置为可被 2 整除的数字来修复溢出的元素，我猜这是一些舍入问题）。
@jor1s 实际上是 z-index:-1 在伪元素上将它们放在 div 的内容后面，这就是它的工作原理......对于溢出部分，是的，你是对的，它是主要元素的宽度，因为我使用过50% 在伪元素宽度...
是的，我刚刚意识到我对 z-index 很愚蠢，背景应该在背景中。这是一个问题，因为我需要在主要的黑色背景上有一个白色的透明径向渐变。
我为径向渐变添加了一个额外的 div。我宁愿不这样做，但我无法通过偏斜方法找到另一种方法。我会接受你的回答。非常感谢！

【解决方案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)

【讨论】：