現在行っている方法よりも簡単に循環divを作成する方法があるかどうか疑問に思っています。
現在、サイズごとに画像を作っているところですが、これは面倒です。
とにかくCSSを使用して円形のdivを作成し、半径を指定できますか?
現在行っている方法よりも簡単に循環divを作成する方法があるかどうか疑問に思っています。
現在、サイズごとに画像を作っているところですが、これは面倒です。
とにかくCSSを使用して円形のdivを作成し、半径を指定できますか?
回答:
ここにデモがあります:http : //jsfiddle.net/thirtydot/JJytE/1170/
CSS:
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
}
.type3 {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
HTML:
<div class="circleBase type1"></div>
<div class="circleBase type2"></div><div class="circleBase type2"></div>
<div class="circleBase type3"></div>
IE8以前でこれを機能させるには、CSS3 PIEをダウンロードして使用する必要があります。上記の私のデモはIE8では機能しませんが、これはjsFiddleがホストしていないためですPIE.htc
。
私のデモは次のようになります:
div
あなたのページのは丸いので、例えばそこに追加した場合border: 5px solid red
に見ることができます。問題は、「円をオーバーハングする」イメージの部分が非表示になっていないことです。ここで適用する通常の回避策は特に簡単ではありません。この-webkit-mask-image
プロパティを使用してWebKitブラウザーを修正することをお勧めします(border-radius
他のブラウザーの場合はを維持します)。詳細はこちら:webkit.org/blog/181/css-masks。また、Stack Overflowで質問して、他の人が他のアイデアを持っているかどうかを確認することもできます。
要素の各辺のborder-radiusを50%に設定すると、任意のサイズの円表示が作成されます。
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
これを試して
.iphonebadge {
border-radius:99px;
-moz-border-radius:99px;
-webkit-border-radius:99px;
background:red;
color:#fff;
border:3px #fff solid;
background-color: #e7676d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
background-image: linear-gradient(top, #e7676d, #b7070a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a');
-webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
-moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
display:inline-block;
padding:2px 2px 2px 2px ;
margin:3px;
font-family:arial;
font-weight:bold;
}
それは実際に可能です。
参照:CSSヒント:画像なしでサークルを作成する方法。デモを参照してください。
しかし注意してください、それは基本的に互換性の面で深刻な欠点があります、あなたは猫の樹皮を作っています。
あなたが見るように、あなただけを設定する必要がheight
ありwidth
、半分にborder-radius
幸運を!
jsfiddle
リンクをありがとう!このリンクは、あなたの答えから今のところ機能している唯一のものです。;)
いくつかの(20以上の)水平または垂直の1px divを使用して円を作成する[悪い考え]もあります。このjQueryプラグインは、このメソッドを使用してさまざまな形状を作成します。
サイズに応じて幅と高さを与えるが、両方を等しく保つ
.circle {
background-color: gray;
height: 400px;
width: 400px;
border-radius: 100%;
}
<div class="circle">
</div>
border-radius: 50%;
十分です
.fa-circle{
color: tomato;
}
div{
font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
「画像を使用するよりもサークルdivを作成する方が簡単ですか?」FontAwesomeを使用します。
fontawesome cssファイルをインポートするか、ここで CDNからインポートします
そしてあなたはただ:
<div><i class="fa fa-circle" aria-hidden="true"></i></div>
そしてあなたはそれにあなたがそれをあなたが望むどんなフォントサイズでも欲しいどんな色でも与えることができます。
radial-gradient
CSS関数を試すことができます。
.circle {
width: 500px;
height: 500px;
border-radius: 50%;
background: #ffffff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
div
レイヤーに適用します。
<div class="circle"></div>
次の画像があるとします。
これからサークルを作るには、追加するだけです
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
}
したがって、divがあれば、同じことができます。
以下の例を確認してください:
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
animation: stackoverflow-example infinite 20s linear;
pointer-events: none;
}
@keyframes stackoverflow-example {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div>
<img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>
基本的に、これはdivの絶対位置を使用して、指定された座標に文字を配置します。したがって、円のパラメトリック方程式を使用して、円を描くことができます。divの位置を相対位置に変更すると、正弦波になります...
本質的には、positionプロパティを悪用することで方程式をグラフ化しています。私はcssに精通していないので、誰かがきっとこれをよりエレガントにすることができます。楽しい。
これは、すべてのブラウザーとモバイルデバイス(私が知っているもの)で機能します。私は自分のWebサイトでそれを使用して、テキストの正弦波を描画します(www.cpixel.com)。このコードの元のソースは次の場所にあります:www.mathopenref.com/coordcirclealgorithm.html
<html>
<head></head>
<body>
<script language="Javascript">
var x_center = 50; //0 in both x_center and y_center will place the center
var y_center = 50; // at the top left of the browser
var resolution_step = 360; //how many times to stop along the circle to plot your character.
var radius = 50; //how big ya want your circle?
var plot_character = "·"; //could use any character here, try letters/words for cool effects
var div_top_offset=10;
var div_left_offset=10;
var x,y;
for ( var angle_theta = 0; angle_theta < 2 * Math.PI; angle_theta += 2 * Math.PI/resolution_step ){
x = x_center + radius * Math.cos(angle_theta);
y = y_center - radius * Math.sin(angle_theta);
document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
}
</script>
</body>
</html>
円の場合は、div要素を作成してから、width = 2 of the border radius = 2 times paddingと入力します。また、line-height = 0たとえば、円の半径として50pxを使用すると、以下のコードが適切に機能します。
width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;