«css-shapes» 태그된 질문

아래 이미지와 같이 한쪽 (예 : 아래쪽) 에만 기울어 진 가장자리 를 사용하고 다른 가장자리는 똑바로 유지 하는 모양을 만들려고합니다 . 테두리 방법 (코드는 아래에 나와 있음)을 사용해 보았지만 모양의 치수가 동적이므로이 방법을 사용할 수 없습니다. .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: …

92 html  css  responsive-design  css-shapes 

방금 깔끔한 CSS 트릭을 발견했습니다. 바이올린을 확인하십시오 ... .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } <div>Cool Trick: <br /> <div class="tooltiptail"></div> </div> <br /> <div>How do I get …

89 css  tooltip  css-shapes 

CSS로이 이미지를 다시 만들려고합니다. 반복 할 필요가 없습니다. 이것은 내가 시작한 것이지만 직선이 있습니다. #wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; } <div id="wave"></div> 코드 조각 실행결과 숨기기스 니펫 확장

80 css  css-shapes 

그래서 CSS를 사용하여 반복되는 육각형 패턴을 만들어야합니다. 이미지가 필요한 경우 거기에 갈 수 있지만 가능하면 CSS 만 사용하는 것이 좋습니다. 내가 만들려는 아이디어는 다음과 같습니다. 기본적으로 육각형 모양을 만든 다음 그 위에 텍스트 / 이미지를 오버레이하는 방법이 필요합니다. 아직 코드가 많지 않습니다. 어디서부터 시작해야할지 모르겠습니다. 문제는 <div>( http://css-tricks.com/examples/ShapesOfCSS/ ) 와 …

79 html  css  css-shapes