Hình tam giác CSS để phù hợp với các phần tử div có kích thước biến

Question

Vui lòng tham khảo mục fiddle của tôi. Tôi đã định tạo ra một hình tam giác (được đặt bên trong một div), và làm cho nó phù hợp chính xác (góc này sang góc khác).

Dưới đây là các quy tắc nêu:

• Đặt tam giác bên trong tất cả các phần tử div.
• Góc dưới cùng bên trái của hình tam giác phải vừa với góc dưới bên trái bên trong tất cả các div.
• Góc trên cùng bên phải của hình tam giác phải khớp với góc trên bên phải bên trong tất cả các div.
• Các div có chiều rộng cố định và chiều cao NHƯNG trong cuộc sống thực, tất cả chúng đều không xác định, được kế thừa từ cha mẹ.
• Góc của đường chéo sẽ khác nhau cho mỗi div nhưng điều đó là ok.
• Sử dụng đường viền, độ dốc, chuyển đổi hoặc SVG để giải quyết vấn đề. Tôi không muốn sử dụng các giải pháp pixel cố định như canvas hoặc PNG.

.one { 
 
    width: 100px; 
 
    /* Unknown */ 
 
    height: 30px; 
 
    /* Unknown */ 
 
    background: #ccc; 
 
} 
 
.two { 
 
    width: 40px; 
 
    /* Unknown */ 
 
    height: 90px; 
 
    /* Unknown */ 
 
    background: #aaa; 
 
} 
 
.three { 
 
    width: 70px; 
 
    /* Unknown */ 
 
    height: 70px; 
 
    /* Unknown */ 
 
    background: #aaa; 
 
} 
 
.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 0 50px 50px; 
 
    border-color: transparent transparent #007bff transparent; 
 
}

<div class="one"></div> 
 
<br> 
 
<div class="two"></div> 
 
<br> 
 
<div class="three"></div> 
 
<br> 
 

 
<div class="triangle"></div>

JSFiddle Reference

Answer 1

Đạt hiệu ứng này với border sẽ không thể cho container động cỡ bởi vì họ không thể lấy giá trị phần trăm hoặc thích ứng dựa trên một sự thay đổi trong kích thước của container . Họ chỉ có thể sử dụng đơn vị pixel hoặc khung nhìn. Cả hai sẽ không được sử dụng nhiều cho một container năng động.

Biến đổi có thể được sử dụng bằng cách đặt phần tử giả trên đầu các vùng chứa nhưng chúng sẽ cần tính toán chiều cao và chiều rộng của phần tử dựa trên phương trình lượng giác. Các đơn giản hơn sẽ là các phương pháp tiếp cận gradient và SVG.

Sử dụng Gradient:

Bạn có thể làm điều này bằng một gradient với to [side] [side] cú pháp. Điều này phản hồi và sẽ hoạt động với tất cả các kích thước vùng chứa. Hạn chế duy nhất là sẽ có các đường răng cưa trong một số trường hợp mà chiều rộng hoặc chiều cao quá lớn so với mặt khác. Một lợi thế của việc này là nó không yêu cầu bất kỳ yếu tố bổ sung (SVG hoặc HTML, thậm chí không giả) nhưng nhược điểm sẽ là khi các hiệu ứng di chuột và nhấp chuột được yêu cầu cho tam giác một mình (giới hạn trong ranh giới của tam giác). . Vì phần tử vẫn là hình chữ nhật/hình vuông, hiệu ứng di chuột hoặc nhấp chuột sẽ được kích hoạt ngay cả khi con chuột ở bên ngoài tam giác nhưng bên trong vùng chứa.

.one { 
 
    width: 100px; 
 
    height: 30px; 
 
    background-color: #ccc; 
 
} 
 
.two { 
 
    width: 40px; 
 
    height: 90px; 
 
    background-color: #aaa; 
 
} 
 
.three { 
 
    width: 70px; 
 
    height: 70px; 
 
    background-color: #aaa; 
 
} 
 
div { 
 
    background-image: linear-gradient(to top left, blue 50%, transparent 51%); 
 
}

<div class="one"></div> 
 
<br> 
 
<div class="two"></div> 
 
<br> 
 
<div class="three"></div> 
 
<br>

---

Sử dụng SVG:

Bạn cũng có thể làm điều đó với yếu tố SVG path như trong đoạn mã dưới đây. SVG phải được đặt hoàn toàn đối với container và có 100% chiều rộng và chiều cao của cha mẹ.

Lợi thế của việc sử dụng SVG cho tam giác trên các gradient là các hiệu ứng di chuột và nhấp chuột có thể được thêm vào chỉ một mình tam giác.

.one { 
 
    width: 100px; 
 
    height: 30px; 
 
    background-color: #ccc; 
 
} 
 
.two { 
 
    width: 40px; 
 
    height: 90px; 
 
    background-color: #aaa; 
 
} 
 
.three { 
 
    width: 70px; 
 
    height: 70px; 
 
    background-color: #aaa; 
 
} 
 

 
div{ 
 
    position: relative; 
 
} 
 
div > svg { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
svg path{ 
 
    fill: #0007bf; 
 
} 
 
svg path:hover{ 
 
    fill: crimson; 
 
}

<div class="one"> 
 
    <svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <path d='M100,0 L100,100 0,100z' /> 
 
    </svg> 
 
</div> 
 
<br> 
 
<div class="two"> 
 
    <svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <path d='M100,0 L100,100 0,100z' /> 
 
    </svg> 
 
</div> 
 
<br> 
 
<div class="three"> 
 
    <svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <path d='M100,0 L100,100 0,100z' /> 
 
    </svg> 
 
</div> 
 
<br>

Answer 2

trong Gradient

phong cách

.triangle { 
width: 100%; 
height: 100%; 
background: linear-gradient(to bottom right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, #007bff 50%, #007bff 100%) 
} 

html

<div class="one"> 
    <div class="triangle"></div> 
</div><br> 
<div class="two"> 
    <div class="triangle"></div> 
</div><br> 
<div class="three"> 
    <div class="triangle"></div> 
</div>