HTML & CSSur HTML, XHTML & CSS
8 svar · 456 visningar · startad av K@llen
Hej, :)
Klockan är mycket och jag ser antagligen inte skogen för alla träden. Så här är läget:
Jag har en div som är satt med en 1px tjock border runt om i en tjusig färg. Ett av hörnen vill jag ha runt. Hur gör jag på bästa enklaste sätt?
En bild.
har för mig att det är enda lösningen än så länge(någon special css för FF fans om jag inte minns fel)
Testade det först, men den la sig innanför bordern. :(
om du lägger bilden i et lager då?(lägg den i en <div> och ge den en z-index)
Här är ett exempel på en/tvåpixelsdivvar med css...
.rundtop {background: #B0C4DE;}
.rundbotten {background: #B0C4DE;}
.r1{ margin: 0 16px; height: 1px; overflow: hidden; background: #ffffff;}
.r2{margin: 0 13px; height: 1px; overflow: hidden; background: #ffffff;}
.r3{margin: 0 11px; height: 1px; overflow: hidden; background: #ffffff;}
.r4{margin: 0 9px; height: 1px; overflow: hidden; background: #ffffff;}
.r5{margin: 0 8px; height: 1px; overflow: hidden; background: #ffffff;}
.r6{margin: 0 7px; height: 1px; overflow: hidden; background: #ffffff;}
.r7{margin: 0 6px; height: 1px; overflow: hidden; background: #ffffff;}
.r8{margin: 0 5px; height: 1px; overflow: hidden; background: #ffffff;}
.r9{margin: 0 4px; height: 1px; overflow: hidden; background: #ffffff;}
.r10{margin: 0 3px; height: 2px; overflow: hidden; background: #ffffff;}
.r11{margin: 0 2px; height: 2px; overflow: hidden; background: #ffffff;}
.r12{margin: 0 1px; height: 3px; overflow: hidden; background: #ffffff;}
Här är botten och så vänder man på det hela om man vill ha topp.
<div class="rundbotten">
<div class="r12"></div>
<div class="r11"></div>
<div class="r10"></div>
<div class="r9"></div>
<div class="r8"></div>
<div class="r7"></div>
<div class="r6"></div>
<div class="r5"></div>
<div class="r4"></div>
<div class="r3"></div>
<div class="r2"></div>
<div class="r1"></div></div>
Osäker på om du kan göra en rund bordereffekt annat än med bild. Har nog bara sett exempel på runda hörn när det finns en bakgrundsfärg och en färg på allt det som det runda hörnet finns i. Men man kan ju alltid testa ;-)
Mitt bidrag: http://member.webforum.nu/3888/corner.html
Tack för alla förslag på lösningar. Markerar det som passade mig bäst. :)
jag gjorde en specialare med h1
i html såhär
<div class="slutspurt">
<div class="index">
<h1 class="index"><span>välkommen</span></h1>
<p>blablabla</p>
</div></div>
i css'en såhär
.index {
background-image:url(img/roundcornertop.jpg);
margin:0;
padding-bottom:10px;
background-position:top right;
background-repeat:no-repeat;
}
.index h1 span {
display:none;
}
h1 {
font-size: 16px;
background-repeat:no-repeat;
background-position:right;
height:80px;
margin:0;
}
.slutspurt {
background-image:url(img/roundcornerbottom.jpg);
background-position:bottom right;
background-repeat:no-repeat;
margin:0;
padding:0;
border-left:3px solid #C6D96D;
border-right:3px solid #C6D96D;
}
h1-texten visades inte men bakgrunden gjorde det och p flöt inte in över bakgrunden. man kan säkert lösa det på andra sätt men jag tyckte det här var effektivt
ps. jag har inte kollat igenom alla svar, kanhända att andra svarat som mig också... ds.
