[html] HTML에서 눈물을 어떻게 만듭니 까?
웹 페이지에 표시 할 모양을 만들려면 어떻게합니까?
이미지 크기 조절시 흐릿 해지기 때문에 이미지 를 사용하고 싶지 않습니다.
나는 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/>
요소를 다음과 같이 사용합니다 .
- 상단 곡선 2 개에 대한 2 차 베 지어 곡선 명령 2 개 (로 시작하는 선
Q
) - 큰 바닥을위한 1 개의 arc 명령 (로 시작하는 줄
A
)
<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 코드의 주요 문제는 다음과 같습니다.
- 너비와 다른 높이를 사용했습니다
- 올바른 각도 크기를 회전하지 않았습니다
따라서 이러한 문제를 ‘수정’하면 다음과 같은 결과가 발생합니다.
.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에서만 작동합니다. VML 은 SVG 와 다른 명령을 사용합니다 . 예 : 상대 입방 베 지어에 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>
답변
또는 뷰어의 글꼴에서 지원하는 경우 유니 코드 문자를 사용하십시오.
삭제 : ? (💧
)
또는
검은 색 물방울 : ? (🌢
)
그에 따라 확장하십시오!
답변
개인적으로 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>
아래는 그라디언트 채우기 및 그림자 가있는 고급 버전 입니다. hover
SVG와 비교할 때 Canvas의 한 가지 단점을 설명하기 위해 모양에 효과를 포함했습니다 . 캔버스는 래스터 (픽셀)를 기반으로하므로 특정 지점을 넘어 확장하면 흐릿하게 표시됩니다. 그에 대한 유일한 해결책은 모든 브라우저 크기 조정에서 모양을 다시 칠하는 것입니다.
베 지어 곡선 사용
Path API 사용
참고 : 내 answere에서 언급 한 바와 같이 여기 , 경로 API는 아직 IE와 사파리에서 지원되지 않습니다.
더 읽을 거리 :