この三角形に文字を上に乗せたい
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
こちらで生成した、グラデーションの三角形を背景にして、上に文字を重ねたいと考えています。
<div class="box" id="makeImg">
<p align="center">
テキストテキストテキスト
</p>
</div>
上記のようにコードを書いても、テキストが背景に回り込んでしまいます。
試しに、positionやZ-indexを使用しても、上手く回り込んでくれません。
どのようにすれば上に文字を重ねることができるでしょうか？
<div class="box" id="makeImg">
<p align="center">
テキストテキストテキスト
</p>
</div>
上記のようにコードを書いても、テキストが背景に回り込んでしまいます。
試しに、positionやZ-indexを使用しても、上手く回り込んでくれません。
どのようにすれば上に文字を重ねることができるでしょうか？
わわ さん
10月04日 15時03分
わわさん、こんにちは。
公式サイトのそのままのCSSを使い試してみましたが、pを相対指定すれば、z-indexが効くようです。
CSS
※z-index:999にしていますが、1でも上に出ました。
positionやz-indexまわりの仕様はややこしいですよね。
公式サイトのそのままのCSSを使い試してみましたが、pを相対指定すれば、z-indexが効くようです。
CSS
#makeImg > p {
position: relative;
z-index: 999;
}
position: relative;
z-index: 999;
}
※z-index:999にしていますが、1でも上に出ました。
positionやz-indexまわりの仕様はややこしいですよね。
馬場誠 さん
10月04日 18時16分
ありがとうございます。
一旦、以下のようにして回避しました。
html
CSS
.contentsのleftの値でテキストの位置の指定をしています。
変更点は.box::afterを.box::beforeにしました。
なるほど、pを相対指定。全くアイディアに浮かばなかったです。勉強になりました！ありがとうございます。
一旦、以下のようにして回避しました。
html
html
<div class="box">
<div class="contents">
テキストテキストテキスト
</div>
</div>
<div class="box">
<div class="contents">
テキストテキストテキスト
</div>
</div>
CSS
.contents{
text-align:center;
position: absolute;
left: 47px;
}
.box {
margin : auto;
overflow : hidden;
position : relative;
width : 326px;
height : 277px;
}
.box::before {
content : "";
position : absolute;
width : 231px;
height : 231px;
background : linear-gradient(135deg, #ffffff, #000000, #000000);
top : 162px;
left : 47px;
transform : scaleY(1.7)
rotate(45deg);
}
text-align:center;
position: absolute;
left: 47px;
}
.box {
margin : auto;
overflow : hidden;
position : relative;
width : 326px;
height : 277px;
}
.box::before {
content : "";
position : absolute;
width : 231px;
height : 231px;
background : linear-gradient(135deg, #ffffff, #000000, #000000);
top : 162px;
left : 47px;
transform : scaleY(1.7)
rotate(45deg);
}
.contentsのleftの値でテキストの位置の指定をしています。
変更点は.box::afterを.box::beforeにしました。
なるほど、pを相対指定。全くアイディアに浮かばなかったです。勉強になりました！ありがとうございます。
わわ さん
10月07日 16時29分
afterをbeforeにしても同じように動く場合は、その方が無駄なCSSを書かなくて済むので美しいですね！
良い案だと思います(^-^)
良い案だと思います(^-^)
馬場誠 さん
10月07日 18時43分
