div+css實現凹凸形狀

實際效果圖

CSS代碼片段

在head區域插入css的 代碼片.

  <style type="text/css">
.ao,
.tu {
  display: inline-block;
  width: 0;
  font-size: 16px;
  line-height:23px;
  margin: 35px;
  color: #fff;/*文字白色是爲了顯示不可見*/
}
.ao:before,
.tu:before {
  outline: 2px solid #4788D8;
}
/*使用文字撐開div形狀*/
.ao:before {
  content: "aoa凹aoa";
}
.tu{
  direction: rtl; /*把文本方向設置爲“從右向左”：*/
}
.tu:before {
  content: "凸tutu凸";
}
  </style>

HTML代碼

<div class="ao"></div>
<div class="tu"></div>
<div class="ao"></div>
<div class="tu"></div>

其他

[1]: 技術交流Q羣 149663025