programing

이미지를 사용하는 것보다 서클 디브를 만드는 더 쉬운 방법은?

skycolor 2023. 9. 4. 19:41
반응형

이미지를 사용하는 것보다 서클 디브를 만드는 더 쉬운 방법은?

지금 하는 일보다 더 쉬운 순환 디브를 만들 수 있는 방법이 없을까 생각 중입니다.

지금은 사이즈별로 이미지를 만드는 중인데, 이렇게 하는 것이 귀찮습니다.

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 이상 버전에서 이 기능을 사용하려면 CSS3PIE를 다운로드하여 사용해야 합니다.위의 데모는 IE8에서 작동하지 않지만, 그것은 jsFiddle이 호스팅하지 않기 때문입니다.PIE.htc.

제 데모는 다음과 같습니다.

요소의 각 변의 테두리 반지름을 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

행운을 빕니다.

이 작업을 완료하기 위한 4가지 솔루션이 있습니다.

  1. 국경을 넘는
  2. 클립 패스
  3. 사이비 요소
  4. 방사상의

#circle1 {
  background-color: #B90136;
  width: 100px;
  height: 100px;
  border-radius: 50px;/* specify the radius */
}

#circle2 {
  background-color: #B90136;
  width: 100px;/* specify the radius */
  height: 100px;/* specify the radius */
  clip-path: circle();
}

#circle3::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;/* specify the radius */
  background-color: #B90136;
}

#circle4 {
  background-image: radial-gradient(#B90136 70%, transparent 30%);
  height: 100px;/* specify the radius */
  width: 100px;/* specify the radius */
}
<h3>1 border-radius</h3>
<div id="circle1"></div>
<hr/>
<h3>2 clip-path</h3>
<div id="circle2"></div>
<hr/>
<h3>3 pseudo element</h3>
<div id="circle3"></div>
<hr/>
<h3>4 radial-gradient</h3>
<div id="circle4"></div>

다음과 같은 이미지가 있다고 가정합니다.

이것으로 원을 만들려면 당신이 추가하기만 하면 됩니다.

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

그래서 만약 당신이 디브를 가지고 있다면 당신은 같은 일을 할 수 있습니다.

아래의 예를 확인하십시오.

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

또한 여러 개의 (20+) 수평 또는 수직 1px div를 사용하여 원을 구성하는 나쁜 아이디어도 있습니다.이 jQuery 플러그인은 이 방법을 사용하여 다른 모양을 구성합니다.

크기에 따라 너비와 높이를 지정하지만 둘 다 동일하게 유지합니다.

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}
<div class="circle">
</div>

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

"이미지를 사용하는 것보다 서클 디브를 만드는 더 쉬운 방법은 무엇입니까?"라는 질문에 답하는 다른 솔루션을 언급하고 싶습니다.FontAwesome을 사용하는 것입니다.

폰타썸 css 파일을 가져오거나 여기서 CDN에서 가져옵니다.

그리고 당신은 그냥:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

원하는 색으로 글꼴 크기를 지정할 수 있습니다.

사용할 수 있습니다.radial-gradientCSS 함수:

.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 {
	height: 20rem;
	width: 20rem;
	border-radius: 50%;
	background-color: #EF6A6A;
}
<div class="circle"></div>

반지름을 사용할 수 있지만 IE에서 작동하지 않습니다.border-radius: 5px 5px;.

기본적으로 이것은 주어진 좌표에 문자를 배치하기 위해 절대적인 div의 위치를 사용합니다.따라서 원에 대한 모수 방정식을 사용하여 원을 그릴 수 있습니다.디브의 위치를 상대적인 위치로 바꾸면 사인파가...

본질적으로 우리는 위치 속성을 남용하여 방정식을 그래프화하고 있습니다.저는 css에 대해 잘 모르기 때문에 누군가가 이것을 확실히 더 우아하게 만들 수 있습니다.즐거운 시간 되세요.

이것은 (내가 알고 있는) 모든 브라우저와 모바일 장치에서 작동합니다.저는 제 웹사이트에서 텍스트의 사인파(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>

추가css속성:

border-radius: 50%;

그것을 원형으로 만드는 어떤 디브에게도.

원의 경우 div 요소를 만든 다음 너비 = 테두리 반지름의 2배 = 패딩의 2배를 입력합니다.또한 선 높이 = 0 예를 들어, 원의 반지름이 50개인 경우 다음 코드가 잘 작동합니다.

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;

언급URL : https://stackoverflow.com/questions/4840736/easier-way-to-create-circle-div-than-using-an-image

반응형

'programing' 카테고리의 다른 글

파일이 존재하는지 테스트하는 빠른 방법은 무엇입니까?  (0) 2023.09.09
MariaDB 10.2의 utf_8_span_ci colation이 제대로 작동합니까?  (0) 2023.09.04
PowerShell 버전 정렬  (0) 2023.09.04
동일한 디바이저일 때 빠른 AVX512 모듈로  (0) 2023.09.04
PowerShell에서 해시 테이블 병합: 어떻게?  (0) 2023.09.04

'programing'의 다른글

  • 현재글이미지를 사용하는 것보다 서클 디브를 만드는 더 쉬운 방법은?

관련글

댓글

티스토리툴바