ウェブページを作るとき、私たちは通常そのような要求を目にします(三角形を作ります)。
まず第一に。
.box{
width: 0;
height: 0;
border: 50px solid ;
border-color: #000 #FF0000 #FFFF00 #00FFFF;
}
</style>
</head>
<body >
<div class="box"></div>
</body>
それが必要な場合は、他の3つを非表示にするだけです
.box{
width: 0;
height: 0;
border: 50px solid ;
border-color: #000 transparent transparent transparent;
}
</style>
</head>
<body >
<div class="box"></div>
この種の需要もあります。
この種の三角形の矢印は、Webページで非常に一般的です。
- &gt;&lt;を使用して、状況に応じて作成してから回転します
- アイコンを直接アップロードします(ダウンロードするにはlconfont-Alibabaベクターアイコンライブラリに直接)
.b{
font-weight: bold;
position: absolute;
transform: rotate(90deg);
}
</style>
</head>
<body >
<div class="b">></div>
</body>