«css-shapes» 태그된 질문

На этот вопрос есть ответы на 스택 오버플로 на русском : Как создать треугольники CSS? CSS Tricks-Shapes of CSS 에는 다양한 CSS 모양이 있으며 특히 삼각형에 의지합니다. #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> 코드 스 …

1846 css  geometry  polygon  css-shapes 

다음과 같은 메뉴를 만들려면 어떻게해야합니까? PSD에 연결 PSD 이미지를 사용하고 싶지 않습니다. FontAwesome 과 같은 일부 패키지의 아이콘을 사용 하고 CSS에서 배경 / css를 생성 하는 것을 선호합니다 . PSD를 사용하여 툴팁의 이미지를 생성 한 다음 사용하는 메뉴 버전은 여기 에서 찾을 수 있습니다 .

321 css  tooltip  css-shapes 

이 이미지와 같이 원 안에 숫자를 둘러싸고 싶습니다. 이것이 가능하며 어떻게 달성됩니까?

250 html  css  css-shapes 

하나의 중심 단어가있는 웹 페이지를 갖고 싶습니다. 이 단어를 애니메이션으로 그려서 페이지가 우리가하는 것과 같은 방식으로 단어를 "쓰기"합니다. 즉, 한 지점에서 시작하여 시간이 지남에 따라 선과 곡선을 그려서 최종 결과가 글리프가되도록합니다. 이것이 끝나면 상관 없어 <canvas> DOM인지 DOM인지 상관하지 않으며 JavaScript 또는 CSS 중 어느 것이 든 상관하지 않습니다. jQuery가 …

229 javascript  css  canvas  html5-canvas  css-shapes 

웹 페이지에 표시 할 모양을 만들려면 어떻게합니까? 이미지 크기 조절시 흐릿 해지기 때문에 이미지 를 사용하고 싶지 않습니다. 나는 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> 코드 스 니펫 실행Hide …

222 html  css  svg  css-shapes 

이것은 CSS입니다. div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } 아래 원을 어떻게 생성합니까? 사각형 너비가 180 픽셀이고 높이가 180 픽셀 인 경우 다음과 같이 나타납니다. 경계 반경 30 픽셀을 적용하면 다음과 같이 나타납니다. 사각형이 점점 작아지고 있습니다. 즉, 반지름 크기가 커지면 거의 사라집니다. 그렇다면 …

206 html  css  css-shapes 

내가 지금하고있는 것보다 원형 div를 만드는 더 쉬운 방법이 있는지 궁금합니다. 현재 각기 다른 크기의 이미지를 만들고 있지만이 작업을 수행하는 것은 성가신 일입니다. 어쨌든 CSS를 사용하여 div를 원형으로 만들고 반경을 지정할 수 있습니까?

183 html  css  geometry  css-shapes 

stackoverflow 에서이 예제를 찾았습니다. CSS만으로 원 그리기 어느 것이 좋습니다. 그러나 원의 중간에 텍스트를 포함 할 수 있도록 예제를 수정하는 방법을 알고 싶습니다. 나는 또한 이것을 발견했다 : CSS에서 원의 수직 및 수평 중심 텍스트 (예 : iphone 알림 배지) 그러나 어떤 이유로 든 나를 위해 작동하지 않습니다. 다음 테스트 …

156 css  css-shapes 

CSS에서 파선 테두리 획 사이의 길이와 거리를 제어 할 수 있습니까? 아래 예는 브라우저마다 다르게 표시됩니다. div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> 코드 조각 실행결과 숨기기스 니펫 확장 큰 차이점 : IE 11 / Firefox / Chrome 점선 테두리 모양을 …

124 css  border  css-shapes 

border-radius에 픽셀 또는 em 값 을 사용 하면 값이 요소의 가장 큰 면보다 크더라도 가장자리 반경은 항상 원호 또는 알약 모양 입니다. 백분율을 사용할 때 가장자리 반경은 타원이며 요소의 각 측면 중앙에서 시작하여 타원형 또는 타원 모양이됩니다 . border-radius의 픽셀 값 : 코드 스 니펫 표시 div { background: teal; …

124 css  css-shapes 

HTML5 및 CSS3를 사용하여 원을 어떻게 그리나요? 안에 텍스트를 넣을 수도 있습니까?

117 html  css  geometry  css-shapes 

내 CSS 삼각형 (테두리)에 사용자 지정 16 진수 색상을 사용하려고합니다. 그러나 테두리 속성을 사용하기 때문에 어떻게해야할지 잘 모르겠습니다. 나는 단순히 호환성 때문에 자바 스크립트와 CSS3를 피하고 싶습니다. 나는 삼각형이 # CAD5E0 색상의 1px 테두리 (삼각형의 각진 측면 주위)가있는 흰색 배경을 갖도록 노력하고 있습니다. 이게 가능해? 지금까지 내가 가진 내용은 다음과 …

114 css  border  css-shapes 

닫은. 이 질문은 Stack Overflow 지침을 충족하지 않습니다 . 현재 답변을 받고 있지 않습니다. 이 질문을 개선하고 싶으십니까?Stack Overflow의 주제에 맞게 질문을 업데이트하세요 . 5 년 전 휴관 . 이 질문 개선 진행률 표시 줄을 찾기 위해이 웹 사이트를 검색했지만, 내가 찾은 것은 전체 100 %로 이동하는 애니메이션 원을 보여줍니다. …

112 html  css  progress-bar  progress  css-shapes 

좋아, 모두가 이것을 사용하여 삼각형을 만들 수 있다는 것을 알고 있습니다. #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 그리고 그것은 삼각형으로 채워진 고체를 생성합니다. 그런데 이렇게 속이 빈 화살 모양의 삼각형을 어떻게 만들까요?

102 html  css  css-shapes 

На этот вопрос есть ответы на 스택 오버플로 на русском : Прозрачный текст вырезан из фона CSS를 사용하여 다음 이미지와 같은 배경 효과 에서 투명한 텍스트를 잘라내 는 방법이 있습니까? 이미지가 텍스트를 대체하기 때문에 귀중한 SEO를 모두 잃는 것은 슬픈 일입니다. 처음에는 그림자를 생각했는데 아무것도 알아낼 수가 없어 ... 이미지는 …

92 css  svg  fonts  css-shapes