如何使用纯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浏览器中可用，但您可能希望对text-stroke “白色边框”使用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>