CSS로 둥근 모양을 만드는 법

이 이미지와 같이 CSS로 같은 모양을 만들 수 있습니까? 내 HTML에서 원본 이미지 파일을 사용할 수 있지만 CSS에서 동일한 모양을 사용하고 싶습니다. 어떻게하는지 이해가 안됩니다. border : before, : after 속성을 사용했지만 같은 모양을 줄 수는 없습니다. 내가 지금 무엇을 할 수 있을까?CSS로 둥근 모양을 만드는 법

예 enter image description here

출처

2014-07-15 Rony Satiar

당신은 u는 CSS3 속성을 사용할 수 있습니다 국경 반경 속성 – IazertyuiopI

구글 할 수 있습니다? – user3218194

나는 그것을했다, 친구. 그러나 모양은 다른 위치에서 다른 높이이며 모든 위치에서 동등하지는 않습니다. –

구경 둥근 모양의 모든 가능한 형태 CSS Shapes

이 링크

#circle { 
    width: 100px; 
    height: 100px; 
    background: red; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
}

/* 클리너하지만 약간 덜 지원 : 값 */

로서 "50 %"의 사용 HTML 5 cnavas 애니메이션 파도

<html> 
    <head> 
    <style> 
     body { 
     margin: 0; 
     } 

     h1 { 
     position: absolute; 
     bottom: 10px; 
     left: 10px; 
     margin: 0; 
     color: #FFF; 
     z-index: 10; 
     font-family: Helvetica, sans-serif; 
     } 

     #canvas { 
     background-color:#FAFAFA; 
     position: absolute; 
     top: 0; left: 0; 
     width: 100%; height: 100%; 
     } 
    </style> 

    </head> 

    <body> 
    <h1>Waves</h1> 

    <canvas id="canvas" width="400" height="400"></canvas> 

    <script type='text/javascript'> 
     var canvas = document.getElementById('canvas'); 
     var ctx = canvas.getContext('2d'); 

     canvas.width = window.innerWidth; 
     canvas.height = window.innerHeight; 

     var waves = ["rgba(157, 187, 210, 0.3)", 
        "rgba(171, 216, 201, 0.3)", 
        "rgba(135, 199, 215, 0.3)", 
        "rgba(223, 233, 235, 0.3)"] 

     var i = 0; 

     function draw() { 
     canvas.width = canvas.width; 

     for(var j = waves.length - 1; j >= 0; j--) { 
      var offset = i + j * Math.PI * 12; 
      ctx.fillStyle = (waves[j]); 

      var randomLeft   = (Math.sin(offset/100) + 1)  /2 * 200; 
      var randomRight   = (Math.sin((offset/100) + 10) + 1)/2 * 200; 
      var randomLeftConstraint = (Math.sin((offset/60) + 2) + 1)/2 * 200; 
      var randomRightConstraint = (Math.sin((offset/60) + 1) + 1)/2 * 200; 

      ctx.beginPath(); 
      ctx.moveTo(0, randomLeft + 100); 

      // ctx.lineTo(canvas.width, randomRight + 100); 
      ctx.bezierCurveTo(canvas.width/3, randomLeftConstraint, canvas.width/3 * 2, randomRightConstraint, canvas.width, randomRight + 100); 
      ctx.lineTo(canvas.width , canvas.height); 
      ctx.lineTo(0, canvas.height); 
      ctx.lineTo(0, randomLeft + 100); 

      ctx.closePath(); 
      ctx.fill(); 
     } 

     i = i + 3; 
     } 
     setInterval("draw()", 20); 
    </script> 
    </body> 
</html>

출처

2014-07-15 06:25:09 Suresh

캔버스 속성은 현재 필요하지 않다고 생각합니다. 하지만 공유해 주셔서 감사합니다. :) –

당신은 다음과 같은 사용할 수 있습니다

<img style="border: 2px solid black; 
      border-radius: 30px; 
      -moz-border-radius: 30px; 
      -khtml-border-radius: 30px; 
      -webkit-border-radius: 30px;" 
      src="abc.jpg" />

나는 그것이 작동 바랍니다.

출처

2014-07-15 06:18:59 user3796810

좋은 아이디어입니다. 하지만 이미지 대신 CSS로 스타일을 지정하는 것을 선호합니다. 감사합니다 –

당신은 이미지 요소에 id를 할당 할 수 있습니다. CSS 선택기를 사용하여 해당 특정 요소를 선택하고 그것에 CSS를 실행하십시오. html .. 및 CSS 파일에서 # #round_img {border : 2px solid black; border-radius : 30px ; -moz-border-radius : 30px; -khtml-border-radius : 30px; -webkit-border-radius : 30px;} – user3796810

국경 - r에 접두사를 추가하기 만하면됩니다. 아디 우스 그리고 너 끝났어.

#circle { width:100px; height:100px; border-radius:50%; background:#ccc; }

출처

2014-07-15 06:26:21

나는 이것을 사용했다. 그러나이 이미지와 같은 전체 너비 모양을 만드는 방법은 무엇입니까? –

-1

CSS를 사용하면 원하는 모양을 얻을 수 있습니다.

하지만 두 개 이상을 결합해야합니다 (DIVs).

맞춤 도형에 대해서는이 참조 URL을 참조하십시오. 사용자 정의 모양을 만들 수 있도록

Custom Shapes

이

매우 도움이 될 것입니다.

출처

2014-07-15 06:33:59 Husen

다음 경계 코드를 참조 할 수 있습니다.

HTML :

<div class="cirlce"></div>

CSS :

.cirlce { 
    width: 300px; 
    height: 300px; 
    background-color: red; 
    border-radius: 150px; 
    -moz-border-radius: 150px; 
    -webkit-border-radius: 150px; 
}

출처

2014-07-15 06:35:15

CSS로 둥근 모양을 만드는 법

답변

관련 문제