CSSでブロックに斜め線を引きたい＋写真の表示
解決したいこと
CSSで画像部分とテキスト部分を斜め線で区切りたいのですが、なかなか実装することができません。
調べていると、linear-gradientというCSSをあてると実装できるとのことですが、要素が上手く表示できません。
お力添えいただけると幸いです。
現在のコード（HTML）
<section class="point">
<h2 class="title"><span><i class="far fa-handshake faa-ring animated font-aw-margin "></i>他社にない強み</span>Point</h2>
<div class="static-fluid">
<div class="fluid"></div>
<div class="point-content">
<div class="point-content-image">
<P>Strong point１</P>
</div>
<div class="point-content-text">
<h3 class="title-strong">強み</h3>
<p>との勝負が始まります。我々は最強の組織を目指して様々なことに挑戦していきます。</p>
</div>
</div>
<div class="point-content">
<div class="point-content-image">
<P>Strong point１</P>
</div>
<div class="point-content-text">
<h3 class="title-strong">強み</h3>
<p>との勝負が始まります。我々は最強の組織を目指して様々なことに挑戦していきます。</p>
</div>
</div>
<div class="point-content">
<div class="point-content-image">
<P>Strong point１</P>
</div>
<div class="point-content-text">
<h3 class="title-strong">強み</h3>
<p>との勝負が始まります。我々は最強の組織を目指して様々なことに挑戦していきます。</p>
</div>
</div>
</div>
</section>
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
現在のコード（CSS)
.point {
height: 100%;
background-color: #0e0e11;
}
.point .title {
padding-top: 50px;
}
.point .title span {
color: white;
}
.point-content {
display: flex;
width: 100%;
height: 500px;
}
.point-content-image {
width: 60%;
background-image: url(../img/main-a.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
text-align: center;
color: whitesmoke;
background:linear-gradient(135deg, rgb(255, 255, 255) 80%, tomato 20%);
/*
border-bottom: 10px solid #8ec6ff;
border-left: 25px solid transparent;
*/
box-sizing: border-box;
}
.point-content-text {
width: 40%; /* 幅 */
height: 100px;
color: whitesmoke;
margin: 0 20px 0 50px;
}
例）
def greet
puts Hello World
end
最終的に作りたいイメージ
0 likes
