CSSで台形の先が尖った形を作りたいです。

CSSで下記画像のような形を再現したいです。

サイトを見て下記コードで三角はできたのですが、

border-top: 111.6025px solid #d2b088;
border-left: 500px solid transparent;
border-right: 500px solid transparent;

こんな感じになりました。

あとは、もう少し上の部分を伸ばしたいのですが、どうすれば良いでしょうか？
この形をなんていうのか分からず、色々調べたのですが、見つけられませんでした。

2022/07/22 09:47

台形は四角形ですよ？

退会済みユーザー

2022/07/22 11:55

台形ではなく、台形の先が尖った形です

行動規範の内容に同意します

回答1件

ベストアンサー

clip-pathはどうでしょうか。
clip-path - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

ジェネレーターもあります。
Clippy — CSS clip-path maker
https://bennettfeely.com/clippy/

投稿2022/07/22 09:53

総合スコア1128

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問をすることでしか得られない、回答やアドバイスがある。