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