1
ロゴ画像、第二の画像（黄色と1があります）とグリッドとして表示されるテキストがあります。
しかし、私は2番目の画像にはまっています。私はそれをする方法を知らない。 CSS3アニメーションやSVGなどを使用するかどうか。私はまたこれが反応的であることを望む。
コード：
<header class="header">
<!--logo image-->
<img width="366" height="138" title="" alt="" src="logo.png">
<!--2nd image -->
<img id="shape" title="" alt="" src="2nd_image.png">
<div class="wrapper">
<div class="item">Text</div>
<div class="item">Text</div>
<div class="item">Text</div>
<div class="item">Text</div>
<div class="item">Text</div>
<div class="item">Text</div>
<div class="item">Text</div>
<div class="item">Text</div>
<div class="item">Text</div>
</div>
</header>
はCSS：
.header{
padding-left: 15px;
min-height: 30vh;
background-color: #00337F;
}
body{
margin: 0;
}
.wrapper{
position: absolute;
top: 18%;
left: 30%;
width: 68%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
.item{
color: white;
}
Codelink：https://codepen.io/jacky6181/pen/wPNJwg
注：私はすべてのヘルプは高く評価されDuri.meサイト
に私の画像をホスティングしています
これは素晴らしいです。本当にありがとう！ 私はSVGまたはcss3アニメーションを使用するかどうか分からなかった。私は行を移動することができます変換と回転プロパティを使用しています。 – jackysatpal