css - 使用伪 :Before Trick, 添加空格的漂亮标题形状

Question

在一点帮助下，它几乎是华丽的:TheZoo.com/shapes

除此之外，标题图标和我想要控制的文本之间没有空格。那么，如何在 css pseudo:before 形状中添加边距(或填充)，同时避免额外的标记、间隔 div 或其他元素，完全依赖一个类中的 CSS，例如我的 star1 类？

我尝试添加各种填充、边距设置，但它扭曲了形状。简洁的方式是 Words Are Everything

感谢您的帮助!这是一个片段，但可能在页面上查看源代码会更好。

h2.star2:before  {
                width: 10px;
                height: 20px;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-top: 70px solid #c0d3eb;
    /* position: absolute; */
                content: "";
                float: left;

            }

            h1.star1:after, h1.star1:before {
                width: 10px;
                height: 90px; /* This value changes nothing ? */
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-top: 70px solid #c0d3eb;
                position: absolute;
    content: "";

                }


            div.star3 {
                width: 10px;
                height: 20px;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-top: 70px solid #c0d3eb;
    /* position: absolute; */
                float: left;


            }

            div.star3:after {
                width: 40px;
                    padding-right: 40px;
                    content: "hello dolly";
                    visibility:hidden;


            }

Answer 1

您可以在标题上使用伪右并使用一些填充。

如果你使用线性背景和背景大小，它看起来会更好一些(并且在旧浏览器上根本不会显示:

.sideShaped {
  margin:1em auto;
  position:relative;
  padding:0 1em;/* tune this */
  display:table; /* or inline-block or else or nothing, optionnal */
}
.sideShaped:before, .sideShaped:after {
  content:'';
  width:0.8em; /* tune this */
  background:linear-gradient(to top left, transparent 49%, blue 51%) right no-repeat,
    linear-gradient(to top right, transparent 49%, blue 51%) left no-repeat; /* tune the color */
  background-size:50% 130%; /* tune this too if you wish */
  position:absolute;
  top:0;
  bottom:0;
}
:before {
  left:0;
}
:after {
  right:0;
}

<h1 class="sideShaped"> title 1 </h1>
<h2 class="sideShaped"> title 2 </h2>
<h3 class="sideShaped"> title 3 </h3>
<h4 class="sideShaped"> title 4 </h4>
<h5 class="sideShaped"> title 5 </h5>
<h6 class="sideShaped"> title 6 </h6>