2010-12-01 5 views
3
<!doctype html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <title>1</title> 
     <style type="text/css"> 
body{margin:100px;} 
#x 
{ 
    position:relative; 
    width:300px; 
    height:360px; 
    background-color:#07284a; 
    -moz-border-radius: 30px; 
    -webkit-border-radius:30px; 
    -khtml-border-radius:30px; 
    border-radius:30px; 
    border:1px solid #37629B; 
} 
#f 
{ 
    background-color:#07284a; 
    width:126px; 
    height:126px; 
    position:absolute; 
    right:-63px; 
    top:-63px; 
    -moz-border-radius: 63px; 
    -webkit-border-radius:63px; 
    -khtml-border-radius:63px; 
    border-radius:63px; 
    border:1px solid red; 
} 
     </style> 
    </head> 
<body> 
<div id="x"> 
    <div id="f"></div> 
</div> 

A l'intérieur du bloc "x" apparaît la bordure rouge du cercle ... Comment supprimer les marges de 25% du cercle? Désolé pour le mauvais anglaisCSS Cercle de bordure

AJOUTÉE

http://www.flickr.com/photos/[email protected]/5223999393/

+0

Pouvez-vous essayer d'expliquer plus en détail ce que vous entendez par « Comment puis-je supprimer 25% les frontières du cercle? " Peut-être que Google Traduction peut aider :) – Yahel

+1

Voici le code sur un jsfiddle: http://jsfiddle.net/5MZMj/ – Yahel

+1

Je vois que vous utilisez le code corrigé donné dans votre autre question liée à CSS ici: http: // stackoverflow. com/questions/4313958/css3-coin arrondi-pour-entrée-élément-sans-js-images/4314024 # 4314024. Vous devez toujours accepter une réponse. –

Répondre

7

Je crois que vous voulez supprimer le quart inférieur gauche de la frontière afin qu'il se confond avec le grand rectangle. Vous pouvez le faire en enlevant la bordure inférieure et la rotation de 45 degrés de telle sorte que la partie inférieure est en bas à gauche:

border-bottom-color: transparent; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
transform: rotate(45deg); 
Questions connexes