html - 如何用纯CSS创建文字描边和三 Angular 形？

Question

我正在尝试创建一个 css 设计，如下图所示。实际上，我只需要使用 CSS 来创建这种样式，而不需要使用任何图像。

我尝试让它工作，但不确定如何创建内三 Angular 形。

这是我的 HTML -

    body {
      background: #cdc6e1;
    }
    .content-box {
      background: #28166f;
      width: 250px;
      height: 100px;
    }
    .tag {
      background: #f8c300;
      width: 100px;
      height: 0;
      padding-left: 10%;
      padding-bottom: 10%;
      overflow: hidden;
    }
    .tag:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      margin-left: -500px;
      border-left: 500px solid transparent;
      border-right: 500px solid transparent;
      border-bottom: 500px solid #f8c300;
    }

<div class="content-box">
  <div class="tag">
    <h1>1<span>st</span></h1>
  </div>
  <div class="name">
    <h1>First<br>
              Place</h1>
  </div>
</div>

希望有人可以帮助我实现这种自定义样式。谢谢。

Answer 1

一个基本的模型是使用一些伪元素来生成这个:

.outer {
  height: 200px;
  width: 400px;
  background: purple;
  border: 10px solid pink;
  position: relative;
  text-Align: right;
  font-size: 50px;
  line-height: 200px;
}
.outer:before,
.outer:after {
  height: 0;
  width: 0;
  position: absolute;
  content: "";
  border-bottom: 100px solid yellow;
  border-right: 70px solid transparent;
  border-left: 70px solid transparent;
  bottom: 0;
  left: 20px;
  z-index: 8;
}
.outer:after {
  border-bottom: 130px solid blue;
  border-right: 90px solid transparent;
  border-left: 90px solid transparent;
  z-index: 0;
}
.place {
  position: absolute;
  left: 50px;
  color: red;
  bottom: -20px;
  font-size: 100px;
  line-height: initial;
  z-index: 10;
  
    text-shadow:
    3px 3px 0 white,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 white,  
    1px -1px 0 white,
   -1px  1px 0 white,
    1px  1px 0 white;
}

<div class="outer">First Place
  <div class="place">1st</div>
</div>

注意。 text outline 属性尚未在任何主要浏览器中实现，因此可能需要将“较大的白色文本”放置在后面才能在模型中创建此文本轮廓。

解决方法(如评论中所述)是“破解”文本阴影:

 text-shadow:
    3px 3px 0 white,   /* Simulated effect for Firefox and Opera
                       and nice enhancement for WebKit */
   -1px -1px 0 white,  
    1px -1px 0 white,
   -1px  1px 0 white,
    1px  1px 0 white;

---

文字描边

---

虽然只在 webkit 浏览器中可用，但您可能想使用 text-stroke对于文本的“白色边框”(在 IE 或 Firefox 中不可用)

div {
  font-size: 50px;
  position: relative;
  height: 50px;
  width: 50px;
  color: black;
}
div:before {
  content: "1st";
  z-index: -1;
  left: 0;
  top: 0;
  position: absolute;
  -webkit-text-fill-color: black;
  -webkit-text-stroke: 8px red;
}
html {
  background: gray;
}

<div>
  1st
</div>
<br/>
<strong>Note</strong> only available in webkit browsers