html - 垂直和水平对齐 div 内的 div 与 :after selector

Question

我有这个 HTML 和 CSS 代码:

html {
  overflow-x: hidden;
  overflow-y: hidden;
}
body {
  margin: 0;
}
.triangle-down {
  width: 90%;
  height: auto;
  padding-left: 50%;
  padding-top: 50%;
  overflow: hidden;
}
.triangle-down:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  margin-top: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-top: 500px solid #9CE08F;
}
div {
  float: left;
  margin: 0.5%;
}

<div class="triangle-down">
  <div>&nbsp;</div>
</div>

我正在尝试使 triangle-down 中的 div 垂直和水平对齐。或者，我可以只使用文本而不是 div 并对齐它。在这种情况下，我使用的是 :after 选择器，我无法以某种方式更改 CSS 以使其工作。我知道如何使用 position:relative 和 position:absolute 甚至 display:inline-block 来做到这一点。

但在这种情况下，它更复杂。如果我将 CSS 更改为三 Angular 形向下，那么我就不会再得到三 Angular 形了。

我想要这样的东西:

Answer 1

.btn {
    position: relative;
    display: inline-block;
    height: 0px; width:100%;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
    padding-bottom:42%;
    background-clip:content-box;
    overflow:hidden;
}
.btn:after {
    content: "";
    position: absolute;
    top:0px; left: 0;
    background-color:inherit;
    padding-bottom:50%; width:57.7%;
    z-index:-1;
    
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    
    -webkit-transform: rotate(-30deg) skewX(30deg);;
    -ms-transform: rotate(-30deg) skewX(30deg);
    transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO
body{background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');background-size:cover;} **/

<a href="#" class="btn">Hello!</a>