CSSの図形の中にアイコンを配置するにはどうすればいいですか？

私はビューポートの下に固定したいCSS境界線を使用して三角形を作成しました。また、そのCSS三角形の内側に中央に配置したいブートストラップグリフィコンを持っていますが、それ。CSSの図形の中にアイコンを配置するにはどうすればいいですか？

は、ここに私のコードです：

.to-top { 
 
    border-right: 60px solid transparent; 
 
    border-left: 60px solid transparent; 
 
    border-bottom: 60px solid black; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 50%; 
 
    right: 50%; 
 
    transform: translateX(-50%); 
 
} 
 
.to-top span { 
 
    font-size: 2em; 
 
    transform: translateX(-50%); 
 
}

<a href="#" class="to-top"> 
 
    <span class="glyphicon glyphicon-chevron-up"></span> 
 
</a>

あなたは、この上で私を助けてくださいだろう。

出典

2016-10-14 startToday

.to-top { 
 
    border-right: 60px solid transparent; 
 
    border-left: 60px solid transparent; 
 
    border-bottom: 60px solid black; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 50%; 
 
    right: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
.to-top span { 
 
    height: 2em; 
 
    font-size: 2em; 
 
    transform: translateX(-50%); 
 
    position: fixed; 
 
} 
 

 
.to-top span::before { 
 
    position: absolute; 
 
    bottom: .25em; 
 
    left: -.5em 
 
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
 
<body> 
 
<a href="#" class="to-top"> 
 
    <span class="glyphicon glyphicon-chevron-up"></span> 
 
</a>

出典

2016-10-14 13:53:12

問題は、グリフィコン形状がそのコンテナボックスの全幅に適合しないことにあります。実際には、右側に3px多く得られます。

transformsとtranslatesは、長期的に混乱したり、奇妙な方法でポジションに影響を与えたりする可能性があるため、コードを少し変更しました。

.to-top { 
 
    position: fixed; 
 
    width: 120px; 
 
    height: 120px; 
 
    bottom: -60px; 
 
    background: black; 
 
    left: calc(50% - 60px); 
 
    transform: rotate(45deg); 
 
} 
 
.to-top span { 
 
    font-size: 2em; 
 
    transform: rotate(-45deg); 
 
    left:3px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<a href="#" class="to-top"> 
 
    <span class="glyphicon glyphicon-chevron-up"></span> 
 
</a>

出典

2016-10-14 13:48:03 Stewartside

CSSの図形の中にアイコンを配置するにはどうすればいいですか？

答えて

関連する問題