CSS: Đặt mũi tên/hình tam giác có đường viền ở đầu trình đơn thả xuống của tôi

Question

Chỉ cần khởi chạy trang web này (http://dovidoved.org/) và khách hàng muốn một trong những hình tam giác/mũi tên đó ở đầu mỗi menu thả xuống. Vấn đề là trình đơn có một đường viền xung quanh nó và mũi tên phải lưới với cả nền cũng như đường viền. Không chắc chắn làm thế nào để làm điều đó. Bất kỳ đề xuất? Tôi có phải sử dụng hình ảnh không? Dưới đây là CSS của tôi:

/* creates triangle */ 
.main-navigation ul ul:before { 
    border-bottom: 10px solid #fae0bb; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    content: ""; 
    height: 0; 
    position: absolute; 
    right: 0; 
    top: -10px; 
    width: 0; 
} 

.main-navigation ul ul { 
    background: #fae0bb; 
    border: 8px solid #fffefe; 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
    float: left; 
    position: absolute; 
    margin: 0; 
    top: 2.8em; 
    left: -999em; 
    width: 200px; 
    z-index: 99999; 
} 

Answer 1

Bạn có thể làm điều này bằng :before và :after yếu tố giả, để tạo ra hai hình tam giác:

.main-navigation ul ul:before { 
    content:""; 
    position: absolute; 
    right: 11px; 
    top: -10px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 10px 10px 10px; 
    border-color: transparent transparent #fae0bb transparent; 
    z-index:9999; 
} 
.main-navigation ul ul:after { 
    content:""; 
    position: absolute; 
    right: 4px; 
    top: -22px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 17px 17px 17px; 
    border-color: transparent transparent #ffffff transparent; 
    z-index:9998; 
} 

Bạn chỉ cần thiết lập giá trị đúng right cho cả để làm cho chúng phù hợp với những gì bạn cần.

Live exemple

Answer 2

.main-navigation a:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    border-top: 8px solid #f00; 
    position: absolute; 
    top: -2px; 
    right: -20px; 
} 

Điều chỉnh miếng đệm của li để làm cho hình tam giác phù hợp.