[html] HTML에서 눈물을 어떻게 만듭니 까?

웹 페이지에 표시 할 모양을 만들려면 어떻게합니까?

이미지 크기 조절시 흐릿 해지기 때문에 이미지 를 사용하고 싶지 않습니다.

HTML, CSS 또는 SVG로 만들어야하는 눈물 방울 모양

나는 CSS로 시도했다 :

.tear {
  display: inline-block;
  transform: rotate(-30deg);
  border: 5px solid green;
  width: 50px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
<div class="tear">
</div>

그것은 정말로 망했다.

그런 다음 SVG로 시도했습니다.

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

모양은 얻었지만 바닥 부분은 구부러지지 않았습니다.

HTML 페이지에서 사용할 수 있도록이 셰이프를 만드는 방법이 있습니까?



답변

SVG 접근 방식 :

인라인 SVG 와 곡선 모양을 허용하지 않는 <path/>요소 대신 요소를 사용 하여 이중 곡선을 쉽게 얻을 수 있습니다 <polygon/>.

다음 예제는 <path/>요소를 다음과 같이 사용합니다 .

<svg width="30%" viewbox="0 0 30 42">
  <path fill="transparent" stroke="#000" stroke-width="1.5"
        d="M15 3
           Q16.5 6.8 25 18
           A12.8 12.8 0 1 1 5 18
           Q13.5 6.8 15 3z" />
</svg>

SVG는 이중 곡선으로 이러한 종류의 모양을 만드는 데 유용한 도구입니다. SVG / CSS 비교로 이중 곡선에 대한게시물을 확인할 수 있습니다 . 이 경우 SVG를 사용하면 다음과 같은 장점이 있습니다.

  • 커브 컨트롤
  • 칠 컨트롤 (불투명도, 색상)
  • 스트로크 제어 (폭, 불투명도, 색상)
  • 코드 금액
  • 모양을 만들고 유지하는 시간
  • 확장 가능
  • HTTP 요청이 없습니다 (예와 같이 인라인으로 사용 된 경우)

인라인 SVG에 대한 브라우저 지원 은 Internet Explorer 9로 돌아갑니다 . 자세한 내용 은 canIuse 를 참조하십시오.


답변

기본 테두리 반경

border-radius ‘및 변환을 사용하여 CSS 내에서 비교적 쉽게 수행 할 수 있습니다. CSS가 약간 부족했습니다.

.tear {
  width: 50px;
  height: 50px;
  border-radius: 0 50% 50% 50%;
  border: 3px solid black;
  transform: rotate(45deg);
  margin-top: 20px;
}
<div class="tear"></div>

고급 국경 반경

이것은 위와 매우 유사하지만 조금 더 모양이 좋습니다.

.tear {
  width: 50px;
  height: 50px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  border: 3px solid black;
  transform: rotate(-45deg);
  margin-top: 20px;
}
<div class="tear"></div>


답변

CSS 코드의 주요 문제는 다음과 같습니다.

  1. 너비와 다른 높이를 사용했습니다
  2. 올바른 각도 크기를 회전하지 않았습니다

따라서 이러한 문제를 ‘수정’하면 다음과 같은 결과가 발생합니다.

.tear {
  display: inline-block;
  transform: rotate(-45deg);
  border: 5px solid green;
  width: 100px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
/***for demo only***/

.tear {
  margin: 50px;
}
<div class="tear">
</div>

CSS 길이를 절약하기 위해 border-radius 속성을 다음과 같이 다시 작성할 수 있습니다.

border-radius: 50% 0 50% 50%;

바이올린에 표시된 의사 요소 향상 될 수 있습니다

대안

내가 발견 인 Vinay Challuru codepen에.

여기의 논리를 사용하면 거의 모든 가능한 빌드 모양 등으로 SVG 를 만들 수 있습니다 . 예를 들어, 빠른 출력은 다음과 같습니다.

SVG를 사용하고 있으며 모양을 원하는 결과로 변경할 수있는 여러 가지 방법으로 모양을 변경할 수 있습니다.

면책 조항 필자는 위의 펜을 쓰지 않고 소스 만 제공했습니다.


CSS 버전

이것은 완전하지는 않지만 CSS를 사용하여이 모양을 생성 할 수도 있습니다.

SVG 버전

SVG 가이 답변의 최상위에 있어야한다는 것을 알아야하지만 도전을 좋아하므로 SVG를 사용해보십시오.

svg {
  height: 300px;
}
svg path {
  fill: tomato;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100">

  <path d="M49.015,0.803
    c-0.133-1.071-1.896-1.071-2.029,0
    C42.57,36.344,20,43.666,20,68.367
    C20,83.627,32.816,96,48,96
    s28-12.373,28-27.633
    C76,43.666,53.43,36.344,49.015,0.803z
    M44.751,40.09
    c-0.297,1.095-0.615,2.223-0.942,3.386
    c-2.007,7.123-4.281,15.195-4.281,24.537
    c0,5.055-2.988,6.854-5.784,6.854
    c-3.189,0-5.782-2.616-5.782-5.831
    c0-11.034,5.315-18.243,10.005-24.604
    c1.469-1.991,2.855-3.873,3.983-5.749
    c0.516-0.856,1.903-0.82,2.533,0.029
    C44.781,39.116,44.879,39.619,44.751,40.09z"/>


</svg>

변경하면 path값을, 당신은 당신의 눈물 디자인의 모양을 변경할 수있을 것입니다.


답변

이 모양의 IMO 는 곡선의 연속성을 보장하기 위해 부드러운 곡선 대 베 지어가 필요합니다 .

문제의 하락 :

문제가 발생하면

  • 제어점의 길이가 같지 않으므로 부드러운 곡선을 사용할 수 없습니다. 그러나 곡선완전한 연속성을 보장하기 위해 제어점을 이전 제어점과 정확히 반대 (180도)로 만들어야합니다. 아래 그림은이 점을 보여줍니다.

여기에 이미지 설명을 입력하십시오
참고 : 빨간색과 파란색 곡선은 서로 다른 2 차 곡선입니다.

  • stroke-linejoin="miter"뾰족한 상단 부분.

  • 이 형태는 연속적인 c명령 만 사용하므로 생략 할 수 있습니다.

마지막 스 니펫은 다음과 같습니다.

<svg height="300px" width="300px" viewBox="0 0 12 16">
  <path fill="#FFF" stroke="black" stroke-width="0.5" stroke-linejoin="miter"
        d="M 6 1 c -2 3 -5 5 -5 9
           0 7 10 7 10 0
           0 -4 -3 -6 -5 -9z" />
</svg>

TBH , 허용되는 답변의 곡선은 상당히 연속적이지 않습니다.


IE 5-8 (VML)의 경우

IE 5-8에서만 작동합니다. VMLSVG 와 다른 명령을 사용합니다 . 예 : 상대 입방 베 지어에 v를 사용합니다 .

참고 : 이 스 니펫은 IE 5-8에서도 실행되지 않습니다. html 파일을 작성하여 브라우저에서 직접 실행해야합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <style> v\:* { behavior: url(#default#VML); }

    </style >
</head>
<body>
    <div style="width:240; height:320;">
        <v:shape coordorigin="0 0" coordsize="12 16" fillcolor="white" strokecolor="black" strokewidth="1"
            strokeweight="5" style="width:240; height:320"
            path="M 6 1 v -2 3 -5 5 -5 9
           0 7 10 7 10 0
           0 -4 -3 -6 -5 -9 x e">
        </v:shape>
    </div>
</body>
</html>


답변

또는 뷰어의 글꼴에서 지원하는 경우 유니 코드 문자를 사용하십시오.

삭제 : ? (&#128167; )

또는

검은 색 물방울 : ? (&#127778; )

그에 따라 확장하십시오!


답변

개인적으로 SVG를 사용하고 싶습니다. 대부분의 벡터 그래픽 소프트웨어에서 SVG를 만들 수 있습니다. 나는 추천한다 :

아래에서 일러스트 레이터에서 모양을 추적했습니다.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="223.14px" height="319.008px" viewBox="0 0 223.14 319.008" enable-background="new 0 0 223.14 319.008" xml:space="preserve">
  <path fill="none" stroke="#000000" stroke-width="12" stroke-miterlimit="10" d="M111.57,13.291c0,0,57.179,86.984,72.719,108.819
    	c30.359,42.66,41.005,114.694,1.626,154.074c-20.464,20.463-47.533,30.293-74.344,29.488h-0.002
    	c-26.811,0.805-53.88-9.025-74.344-29.488C-2.154,236.804,8.492,164.77,38.851,122.11C54.391,100.275,111.57,13.291,111.57,13.291z" />
</svg>


답변

HTML 캔버스

이것은 지금까지이 스레드에서 발견되지 않은 옵션입니다. 캔버스 드로잉에 사용되는 명령은 SVG와 매우 유사합니다 (웹 티키는이 답변에 사용 된 기본 아이디어에 대한 크레딧을받을 가치가 있습니다).

해당 셰이프는 캔버스 자체 커브 명령 (Quadratic 또는 Bezier) 또는 Path API를 사용하여 만들 수 있습니다. 답은 세 가지 방법 모두에 대한 예를 포함합니다.

Canvas에 대한 브라우저 지원은 상당히 좋습니다 .


이차 곡선 사용

window.onload = function() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.moveTo(120, 20);
    ctx.quadraticCurveTo(117.5, 30, 148, 68);
    ctx.arc(120, 88, 34.5, 5.75, 3.66, false);
    ctx.quadraticCurveTo(117.5, 35, 120, 20);
    ctx.closePath();
    ctx.strokeStyle = '#000';
    ctx.lineWidth = 2;
    ctx.fillStyle = '#77CCEE'
    ctx.stroke();
    ctx.fill();
  }
}
canvas {
  margin: 50px;
  height: 100px;
  width: 200px;
  transform: scale(1.5);
}

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<canvas id='canvas'></canvas>

아래는 그라디언트 채우기 및 그림자 가있는 고급 버전 입니다. hoverSVG와 비교할 때 Canvas의 한 가지 단점을 설명하기 위해 모양에 효과를 포함했습니다 . 캔버스는 래스터 (픽셀)를 기반으로하므로 특정 지점을 넘어 확장하면 흐릿하게 표시됩니다. 그에 대한 유일한 해결책은 모든 브라우저 크기 조정에서 모양을 다시 칠하는 것입니다.


베 지어 곡선 사용

Path API 사용

참고 : 내 answere에서 언급 한 바와 같이 여기 , 경로 API는 아직 IE와 사파리에서 지원되지 않습니다.


더 읽을 거리 :