Rounding the corners of a square and inserting lines inside it with CSS/HTML

0
87
html - Animation after toggling doesn't apply the second style


I need to round the corners of a square and insert lines through the middle of it to shape, I tried with indesign but I couldn’t find a way to make them correctly, need to insert the inner lines and then interact with the html with some divs to insert certain information into each free part

need be like this

enter image description here

but my try is so bad and the lines don’t look right.

enter image description here

html

<div class="_idGenObjectLayout-1">
        <div id="_idContainer000" class="_idGenObjectStyleOverride-1">
        </div>
    </div>
    <div class="_idGenObjectLayout-1">
        <div id="_idContainer001" class="Quadro-de-gr-fico-b-sico _idGenObjectStyleOverride-2">
        </div>
    </div>
    <div class="_idGenObjectLayout-1">
        <div id="_idContainer002" class="Quadro-de-gr-fico-b-sico _idGenObjectStyleOverride-3">
        </div>
    </div>
    <div class="_idGenObjectLayout-1">
        <div id="_idContainer003" class="Quadro-de-gr-fico-b-sico _idGenObjectStyleOverride-4">
        </div>
    </div>
    <div class="_idGenObjectLayout-1">
        <div id="_idContainer004" class="Quadro-de-gr-fico-b-sico _idGenObjectStyleOverride-4">
        </div>
    </div>

css

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
    margin:0;
    padding:0;
    border-width:0;
}
body {
    -epub-hyphens:auto;
}
div.Quadro-de-gr-fico-b-sico {
    border-color:#000000;
    border-width:1px;
    border-style:solid;
}
#_idContainer000 {
    display:inline-block;
    height:2364px;
    width:1053px;
}
#_idContainer001 {
    display:inline-block;
    height:0px;
    position:relative;
    width:490px;
}
#_idContainer002 {
    display:inline-block;
    height:106px;
    position:relative;
    width:1009px;
}
#_idContainer003, #_idContainer004 {
    display:inline-block;
    height:88px;
    position:relative;
    width:0px;
}
div._idGenObjectStyleOverride-1 {
    border-width:0px;
}
div._idGenObjectStyleOverride-2 {
    background-color:#ffffff;
    border-width:8px;
}
div._idGenObjectStyleOverride-3 {
    background-color:#0000ff;
    border-bottom-left-radius:22px;
    border-bottom-right-radius:22px;
    border-top-left-radius:22px;
    border-top-right-radius:22px;
}
div._idGenObjectStyleOverride-4 {
    background-color:#ffffff;
    border-width:10px;
}
div._idGenObjectLayout-1 {
    text-align:center;
}



Source link

Leave a reply

Please enter your comment!
Please enter your name here