Tạo một hình chữ thập trong CSS

Question

là nó có thể, tôi biết tất cả các hình dạng sau đây có thể xảy ra trong liên kết này:

http://css-tricks.com/examples/ShapesOfCSS/

nhưng quả tạt phải tốt quá. Khi tôi nói chéo Ý tôi là như thế này:

Answer 1

Bạn có thể đạt được một cái gì đó như thế này với chỉ pseudoelements:

http://jsbin.com/upiyoc/1/edit

#cross { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

#cross:before, #cross:after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    background: #d00; 
} 

#cross:before { 
    left: 50%; 
    width: 30%; 
    margin-left: -15%; 
    height: 100%; 
} 

#cross:after { 
    top: 50%; 
    height: 30%; 
    margin-top: -15%; 
    width: 100%; 
} 

Kích thước của cây thập tự tương ứng sẽ mở rộng quy mô, theo với các thành phần width và height của các yếu tố #cross

---

Cập nhật: một giải pháp khác (sử dụng mã ít hơn) có thể đơn giản liên quan đến nhiều gradient tuyến tính (không có giả), ví dụ:

http://codepen.io/anon/pen/zxwgPo

#cross { 
    width: 100px; 
    height: 100px; 

    background: linear-gradient(to bottom, transparent 35%, 
             #d00 35%, 
             #d00 65%, 
             transparent 65%), 

       linear-gradient(to right, transparent 35%, 
             #d00 35%, 
             #d00 65%, 
             transparent 65%), 
} 

Answer 2

Tất nhiên nó được. Bạn chỉ cần sử dụng hai yếu tố: Xem http://jsfiddle.net/92XTx/2/

Div kèm theo là relative được định vị sao cho cả hai trẻ em đều có thể được định vị hoàn toàn.

#cross { 
    position: relative; 
    width: 150px; 
    height: 150px; 
} 

Ở đây họ đều hoàn toàn vị trí:

#cross div { 
    position: absolute; 
    background: red; 
} 

để làm cho họ chồng vật nầy lên vật khác.

Và sau đó tạo ra hình dạng của bạn:

.cross-vertical { 
    left: 33%; 
    width: 33%; 
    height: 100%; 
} 

.cross-horizontal { 
    top: 33%; 
    width: 100%; 
    height: 33%; 
} 

Answer 3

này có thể được thực hiện với một thường xuyên '+' cộng với nhân vật cùng với một text-stroke

DEMO (Webkit,Android only)

div { 
 
    font-size: 80px; 
 
    -webkit-text-stroke: 20px red; 
 
    display: inline-block; 
 
    padding: 0 20px; 
 
}

<div>+</div>

Answer 4

Bởi vì tất cả các câu trả lời tôi thấy ở đây trông hoặc dài hoặc nhà cung cấp-prefix-phụ thuộc,

#cross { 
 
    background: red; 
 
    height: 100px; 
 
    position: relative; 
 
    left: 50px; 
 
    width: 20px; 
 
} 
 
#cross:after { 
 
    background: red; 
 
    content: ""; 
 
    height: 20px; 
 
    left: -40px; 
 
    position: absolute; 
 
    top: 40px; 
 
    width: 100px; 
 
}

<div id="cross"></div>

Answer 5

CSS transform có thể dễ dàng sử dụng để đạt được cộng với hình

.close { 
    position: absolute; 
    right: 10px; 
    top: 6px; 
    width: 20px; 
    height: 20px; 
    opacity: 0.3; 
} 
.cross:before, .cross:after { 
    position: absolute; 
    left: 15px; 
    content: ' '; 
    height: 21px; 
    width: 2px; 
    background-color: #333; 
} 
.cross:before { 
    transform: rotate(0deg); 
} 
.cross:after { 
    transform: rotate(-90deg); 
}