Làm thế nào để tạo được border dạng hình thang?

#1

images

#2

F12 trên chrome để coi

#3

này là design tấm hình yêu cầu á bạn nên không f12 để xem được

#4

Cái này chắc sài SVG

1 Like
#5

Tạo button có thẻ <span> bên trong:

<div class="button">
  <span>Your text</span>
</div>

Skew theo trục Ox cho button, rồi skew ngược lại cho span với số đo bằng âm của số đo skew của button

.button {
  transform: skewX(25deg);
}

.button span {
  transform: skewX(-25deg);

Cuối cùng, thêm ::before hoặc ::after để vẽ mấy cạnh vuông vuông (nhớ skew cho đồng bộ) :yum:

https://codepen.io/anon/pen/vwvmmv

8 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?