如何用纯CSS创建文本笔划和三角形？

Question

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

我试过让它工作但不确定如何创建内三角。

这是我的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 broswers中可用，但您可能希望将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

Answer 2

创建一个重复的三角形并将其放在后面。代码如下。 JSBin：http://jsbin.com/totewinizu/2/

HTML：

.tag {
  width: 100px;
  display: block;
  position: relative;
  top: 20px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  border-width: 0px 60px 80px 60px;
  height: 0px;
  width: 0px;
  z-index: 99;
}
.dupe {
  position: absolute;
  border-color: transparent transparent white transparent;
  border-style: solid;
  border-width: 0px 60px 80px 60px;
  top: 40px;
  left: 20px;
  z-index: 9;
}

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