wirklich vage Frage, ich weiß, aber ich weiß nicht, wie sie beschreiben ... Im Grunde ich diese wollen:Wie man Square Corner Dinge machen?
Ich spreche über die Ecke Dinge in rot. Was ist der einfachste Weg, dies zu erreichen? Natürlich könntest du nur einzelne Divs in diesen Formen machen, aber ich habe das Gefühl, sie in die Positionen zu bringen, die du willst, auch wenn alles neu dimensioniert und stopft, wäre es ein Schmerz. Ist das der einzige Weg?
hier ein Ansatz, der nützlich sein könnten. Fügen Sie zwei Pseudo-Elemente hinzu, eines mit oberen und unteren Rändern und das zweite mit linken und rechten Rändern einer bestimmten Farbe (weiß), so dass sie den ursprünglichen Rand "ausweiden" (in diesem Fall blau).
Bei diesem Ansatz handelt es sich um reines CSS, und es ist kein zusätzlicher Markup erforderlich.
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>besser als meine versuchen, +1 ich Grenzen hätte tun sollen und nicht den Hintergrund, die natürlich den Text überlappt. – misterManSam
.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>Hier ist die border-image Lösung von im Kommentar Matthew erwähnt. Nur für das Protokoll gibt es viele gute Antworten hier. Ganz zu schweigen von border-image wird wahrscheinlich nicht in allen Browsern funktionieren.
Hier ist eine Lösung, die einen Inline-SVG.
@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>
Vielleicht css 'border-image' – Matthew