✔ Box mit rundem Rand erstellen

Status
Nicht offen für weitere Antworten.
E

elmyth_

Mitglied
Guten Tag,

ich möchte eine Box wie im Anhang zusehen mit Hilfe von CSS erstellen. Mir ist klar, dass ich mit Bildern arbeiten muss, weil es z.B. in CSS keine runden Ecken "gibt".
Die Frage die sich mir stellt ist, was kann ich ohne Bilder lösen und wie stelle ich es geschickt an.


Gruß
 

Anhänge

  • 25249attachment.jpg
    25249attachment.jpg
    3 KB · Aufrufe: 39
Nun sind es ja nicht nur die Ecken, sondern auch noch die Überschrift, die in die Box integriert weden soll. So weit ich gesehen habe ich dies mit Snazzy Borders leider nicht möglich, da der Border an dieser Stelle unterbrochen werden soll.
 
Solch ein fieldset-Element lässt sich auch mit CSS umsetzen und mit den "snazzy borders" verknüpfen ;)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#xsnazzy {
position:relative;
width: 400px;
}

/* snazzy-borders start */
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #000; border-right:1px solid #000;}
.xb1 {margin:0 5px; background:#000;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
/* snazzy-borders end */

div.xboxcontent {
display:block;
background:#fff;
border:0 solid #000;
border-width:0 1px;
}

div.xboxcontent h1 {
position:absolute;
top:-0.5em;
left:1em;
margin:0;
padding: 0;
font-size:1em;
font-weight:normal;
}

div.xboxcontent h1 span {
margin: 0;
padding:0 0.5em;
color:#000;
background:#fff;
font-size:1em;
}

div.xboxcontent p {
margin: 0;
padding:0.5em;
color:#000;
background:#fff;
}
-->
</style>

</head>
<body>

<div id="xsnazzy">
     <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
     <div class="xboxcontent">
          <h1><span>Menupunkt</span></h1>
          <p>dummy text dummy text dummy text</p>
     </div>
     <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück