Computer >> Máy Tính >  >> Lập trình >> CSS

Cách tạo tam giác bằng CSS clip-path

Chúng ta có thể tạo một hình tam giác bằng cách sử dụng thuộc tính CSS clip-path.

Cú pháp

Cú pháp của thuộc tính clip-path CSS như sau -

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

Ví dụ

Các ví dụ sau minh họa thuộc tính clip-path CSS.

<!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>

Điều này cho kết quả sau

Cách tạo tam giác bằng CSS clip-path

Ví dụ

<!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>

Điều này cho kết quả sau

Cách tạo tam giác bằng CSS clip-path