CSSの円の枠線

<!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>

ブロック内の "x"には円の赤い枠が表示されます... サークルから25％の枠線を削除するにはどうすればよいですか？CSSの円の枠線

ADDED

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

出典

2010-12-01 Isis

「どうすれば25％円からの境界？たぶんGoogle翻訳が助けてくれるでしょう:) – Yahel

ここにjsfiddleのコードがあります：http://jsfiddle.net/5MZMj/ – Yahel

他のCSS関連の質問にある訂正されたコードを使用しています。http：// stackoverflow。 com/questions/4313958/css3-round-corner-for-input-element-js-images/4314024＃4314024。あなたはまだ答えを受け入れる必要があります。 –

の悪い英語のため申し訳ありませんが、私はあなたがそれは大きな長方形でブレンドするように枠の左下四半期を削除したいと考えています。下の境界線を削除し、下端が左下になるように45度回転させることで可能です。

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

出典

2010-12-01 19:45:04 casablanca

答えて

関連する問題