CSSのclip-pathでクローズボタンを作る【備忘録】
Published： Updated：
Index
［ CloseOpen ］
SCSS・CSS
background-color: #000;
transform: rotate(45deg);
width: 100px;
height: 100px;
clip-path: polygon(
calc(50% + .75px) 0,
calc(50% - .75px) 0,
calc(50% - .75px) calc(50% - .75px),
0 calc(50% - .75px),
0 calc(50% + .75px),
calc(50% - .75px) calc(50% + .75px),
calc(50% - .75px) 100%,
calc(50% + .75px) 100%,
calc(50% + .75px) calc(50% + .75px),
100% calc(50% + .75px),
100% calc(50% - .75px),
calc(50% + .75px) calc(50% - .75px)
);
この記事を書いた人
夢拓（MUHIRO）/ Webデザイナー（フロントエンド）
大学中退して飲食業界に就職。飲食業界のブラックな部分を知り退職、その後無職。職業訓練校と独学で今勤めている制作会社に入社。 主にデザイン・構築をメインにUI/UXやアクセシビリティに考慮したWebサイト制作。スクラッチ案件多数、Shopifyテーマカスタマイズは60件以上の実績あり。
免責事項
- 当ブログでは、執筆者の経験に基づいた技術情報や知識を提供していますが、その正確性や普遍性を保証するものではありません。情報は執筆時点のものであり、技術の進展により古くなる可能性があります。これらの情報を利用する際は、自己責任で行ってください。必要に応じて専門家の助言を求めることをお勧めします。
- 当ブログで提供するプログラムコードは、執筆者の最善の知識に基づいていますが、その正確性や完全性を保証するものではありません。コードの利用や実行により生じた損害や問題については、一切の責任を負いかねます。コードの使用は、自己責任で行ってください。
- 当サイトで使用しているスクリーンショット画像について、著作権はサイトの権利者に帰属します。掲載に不都合がある場合、お手数ですがお問い合わせフォームよりご連絡ください。
- 当サイトからリンクよって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いかねますのでご了承ください。
- 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。