回答(2件)

0

東京またきちさん >・・・・HTML.CSSでこれを作りたい・・・・・・・ ご参考に↓ <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"> <style> .grid {width:1000px; margin:0 auto; display: grid; gap: 0px; grid-template-columns: repeat(3, 33%); } .item { background: #cdd; padding: 15px; text-align: center; } .item img { width: 260px; height: auto; } .item p { text-align: left; } .div{width:200px; margin:2em auto 0; background:#5db; text-align: center; position:relative; } .div::after { border: 8px solid transparent; border-left: 9px solid #fff; content: ""; position: absolute; right: 0px; top: 6px; width: 0; } a{line-height:2em; text-decoration: none; color:#fff; } .button { border-radius: 50%; width: 100px; height: 100px; line-height: 100px; background-color: green; border-radius: 50%; color: #fff; text-align: center; } .btn_e { position:absolute; top:0px; left:calc(50% - 495px); width: 70px; height: 70px; background: linear-gradient(to bottom right, #2b9, #6df); border-radius: 50%; color: #fff; line-height:70px; display: block; text-align: center; font-weight: bold; font-size: 120%; } </style> </head> <body> <p class="btn_e"><a href="#">New</a></p> <div class="grid"> <div class="item"> <img src="https://s.yimg.jp/images/ks/clap/image/category/40/2078297558.png" alt="" > <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> <div class="div"><a href="#">詳しくはこちら</a></div> </div> <div class="item"> <img src="https://s.yimg.jp/images/ks/clap/image/category/40/2078297526.png" alt="" > <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> <div class="div"><a href="#">詳しくはこちら</a></div> </div> <div class="item"> <img src="https://s.yimg.jp/images/ks/clap/image/category/40/2078297536.png" alt="" > <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> <div class="div"><a href="#">詳しくはこちら</a></div> </div> </div> </body> </html>