漂亮的 Header 形状使用 Pseudo:Before 技巧，添加 SPACE

Question

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

除了，header图标和文字之间没有space，我要控制。那么我如何将边距（或填充）添加到 css pseudo:before 形状，同时避免额外标记，spacer div 或其他元素，纯粹依赖 CSS合一class，比如我的star1class?

我尝试添加各种填充、边距设置，但它扭曲了形状。简洁的方式是 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

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

如果您使用线性背景和 background-size 它看起来会更好一些（并且在旧版浏览器上根本不会显示：

.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>

漂亮的 Header 形状使用 Pseudo:Before 技巧，添加 SPACE

Beautiful Header Shapes Using Pseudo:Before Trick, Adding SPACE

css

shapes

pseudo-element