CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSクリップパスを使用して三角形を作成する方法

CSSのclip-pathプロパティを使用して三角形を作成できます。

構文

CSSclip-pathプロパティの構文は次のとおりです-

Selector {
   clip-path: /*value*/
}

例

次の例は、CSSのclip-pathプロパティを示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            padding: 10%;
            border-radius: 2%;
            width: 10%;
            box-shadow: inset 0 0 80px violet;
            clip-path: polygon(50% 0, 100% 100%, 0% 100%);
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

これにより、次の出力が得られます

CSSクリップパスを使用して三角形を作成する方法

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            display: flex;
            margin: 10px 0 20px;
         }
         div > div {
            height: 12px;
            border-top: 40px ridge orange;
            border-right: 20px solid white;
            border-bottom: 60px ridge cornflowerblue;
            border-left: 80px solid white;
         }
      </style>
   </head>
   <body>
      <div>
         <div></div>
      </div>
   </body>
</html>

これにより、次の出力が得られます

CSSクリップパスを使用して三角形を作成する方法


  1. CSSで4列のレイアウトグリッドを作成するにはどうすればよいですか？

    CSSを使用して4列のレイアウトグリッドを作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdan

  2. CSSでチェックマーク/チェックマークを作成する方法

    CSSを使用してカスタマイズされたチェックマークを作成できます。次の例は、この効果を示しています- 例 <!DOCTYPE html> <html> <style> div {    margin: 2%;    position: relative;    width: 40px;    height: 40px;    box-shadow: inset 0 0 12px lightblue; } div::before {    co