Làm thế nào để điều chỉnh góc vuông?

Question

câu hỏi Thật mơ hồ, tôi biết, nhưng tôi không biết làm thế nào để mô tả họ ... Về cơ bản, tôi muốn những:

tôi đang nói về những điều góc màu đỏ. Cách dễ nhất để đạt được điều này là gì? Rõ ràng, bạn chỉ có thể tạo ra những div riêng lẻ trong những hình dạng đó, nhưng tôi cảm thấy giống như nhận chúng ở những vị trí bạn muốn, ngay cả khi mọi thứ lại kích cỡ và thứ gì đó, sẽ là một nỗi đau. Có phải đó là cách duy nhất?

Answer 1

Dưới đây là một cách tiếp cận có thể có ích. Thêm hai phần tử giả, một với các đường viền trên và dưới và đường viền thứ hai có đường viền trái và phải của một màu nhất định (màu trắng) sao cho chúng "viền trắng" đường viền ban đầu (màu xanh trong trường hợp này).

Phương pháp này là CSS thuần túy và không có sự đánh dấu thêm nào.

div { 
 
    font-size: 4.00em; 
 
    padding: 40px; 
 
    border: 2px solid blue; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
div:after { 
 
    content: ''; 
 
    display: block; 
 
    border-left: 2px solid white; 
 
    border-right: 2px solid white; 
 
    position: absolute; 
 
    height: 50%; 
 
    left: -2px; 
 
    right: -2px; 
 
    top: 25%; 
 
    bottom: 25%; 
 
} 
 
div:before { 
 
    content: ''; 
 
    display: block; 
 
    border-top: 2px solid white; 
 
    border-bottom: 2px solid white; 
 
    position: absolute; 
 
    height: 100%; 
 
    left: 25%; 
 
    right: 25%; 
 
    top: -2px; 
 
    bottom: -2px; 
 
}

<div>Box Text</div>

Answer 2

.a { 
 
    height: 100px; 
 
    width: 100px; 
 
    text-align: center; 
 
    line-height: 100px; 
 
    background-color: #eee; 
 
    position: relative; 
 
    } 
 

 
.ul { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 30%; 
 
    width: 30%; 
 
    border-top: 1px solid black; 
 
    border-left: 1px solid black; 
 
    } 
 

 
.ur { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    height: 30%; 
 
    width: 30%; 
 
    border-top: 1px solid black; 
 
    border-right: 1px solid black; 
 
    } 
 

 
.ll { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 30%; 
 
    width: 30%; 
 
    border-bottom: 1px solid black; 
 
    border-left: 1px solid black; 
 
    } 
 

 
.lr { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 30%; 
 
    width: 30%; 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    }

<div class="a"> 
 
    <span>text</span> 
 
    <div class="ul"></div> 
 
    <div class="ur"></div> 
 
    <div class="ll"></div> 
 
    <div class="lr"></div> 
 
</div>

Answer 3

Đây là giải pháp được đề cập bởi border-imageMatthew trong nhận xét. Chỉ để ghi lại, có rất nhiều câu trả lời hay ở đây. Chưa kể border-image có thể sẽ không hoạt động trên tất cả các trình duyệt.

Can I use border-image

Đây là giải pháp sử dụng SVG nội tuyến.

@import url(http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise); 
 

 
div { 
 
    width: 275px; 
 
    height: 155px; 
 
    margin: 0 auto; 
 
    font-size: 6.2em; 
 
    text-align: center; 
 
    font-family: 'Waiting for the Sunrise', cursive; 
 
} 
 

 
.inline-svg { 
 
    border: 5px solid white; 
 
    border-image: url('data:image/svg+xml;utf8,<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="275px" height="155px" viewBox="0 0 275 155" enable-background="new 0 0 275 155" xml:space="preserve"><path fill="#ff0000" d="M0.5,38.5v-38h57v15h-42v23H0.5z M260.5,38.5h15v-38h-59v15h44V38.5z M260.5,112.5v28h-44v15h59v-43H260.5z M15.5,112.5h-15v43h57v-15h-42V112.5z"/></svg>') 2% stretch; 
 
    min-width: 50%; 
 
} 
 

 
@media screen and (min-width: 992px) { 
 
    .inline-svg { 
 
    width: 360px; 
 
    height: 265px; 
 
    } 
 
    div { 
 
    font-size: 9.4em; 
 
    } 
 
}

<div class="inline-svg">Text</div>