对准垂直和水平与格内的div：选择后

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>

，我试图让div的triangle-down内垂直对齐和水平。或者，我可以使用文本而不是div来对齐它。在这种情况下，我使用：after选择器，我无法改变CSS以使其工作。我知道如何使用position:relative和position:absolute甚至display:inline-block。

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

我想有这样的事情：

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>

Answer 2

试试这个下面

.up { 
 
    width: 0px; 
 
    height: 0px; 
 
    margin-bottom: 30px; 
 
    border-style: inset; 
 
    border-width: 0 100px 173.2px 100px; 
 
    border-color: transparent transparent #007bff transparent; 
 
    float: left; 
 
    transform:rotate(540deg); 
 
    -ms-transform:rotate(540deg); 
 
    -moz-transform:rotate(540deg); 
 
    -webkit-transform:rotate(540deg); 
 
    -o-transform:rotate(540deg); 
 
    display:block; 
 
} 
 

 
.up p { 
 
    text-align: center; 
 
    top: 59px; 
 
    left: -47px; 
 
    position: relative; 
 
    width: 93px; 
 
    height: 93px; 
 
    margin: 0px; 
 
    -webkit-transform:rotate(540deg); 
 
     transform:rotate(540deg)); 
 
    -ms-transform:rotate(540deg)); 
 
    -moz-transform:rotate(540deg)); 
 
    -o-transform:rotate(540deg); 
 
}

<div class="up"> 
 
<p>some information text goes here</p> 
 
</div>