Vẽ góc 45 độ với CSS3

Question

Tôi đang cố gắng vẽ một góc 45 độ với CSS, hình ảnh đầu tiên là thứ tôi đang cố gắng đạt được, thứ hai là thứ tôi đã quản lý. Tôi không thể tìm ra cách cắt góc ngoài bằng một góc 45 độ khác (xem đường màu đỏ chấm).

.flick .text { 
 
    position: relative; 
 
    z-index: 50; 
 
} 
 
.flick { 
 
    background-color: #055468; 
 
    color: white; 
 
    margin-left: 140px; 
 
    padding: 15px; 
 
} 
 
.flick:before { 
 
    background: #055468; 
 
    content: ""; 
 
    height: 100px; 
 
    margin: -65px 0 0 -90px; 
 
    position: absolute; 
 
    transform: skew(45deg); 
 
    width: 80px; 
 
}

<div class="flick"><span class="text">Hello world</span></div>

Answer 1

Bạn nên sử dụng rotate thay vì skew cho việc này. Tôi cũng đã thay đổi vị trí của phần tử :before của bạn sao cho góc dưới bên phải của nó thẳng hàng với góc dưới cùng bên trái của lớp flick và sau đó đặt transform origin thành góc chia sẻ, tạo chính xác hiệu ứng bạn muốn (Tôi cũng đã di chuyển nó ra khỏi hàng đầu vì vậy hiệu quả sẽ được hiển thị):

.flick .text { 
 
    position: relative; 
 
    z-index: 50; 
 
} 
 
.flick { 
 
    margin-top: 200px; 
 
    background-color: #055468; 
 
    color: white; 
 
    margin-left: 140px; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 
.flick:before { 
 
    background: #055468; 
 
    content: ""; 
 
    width: 100px; 
 
    height: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 100%; 
 
    transform: rotateZ(45deg); 
 
    transform-origin: bottom right; 
 
    width: 80px; 
 
}

<div class="flick"><span class="text">Hello world</span></div>