css-shapes

Wave (or shape?) with border on CSS3

由 笑着哭i 提交于 2019-12-17 03:18:53
问题 I need to implement a wave shape with CSS3, I tried to implement with CSS3 Shapes, but I has not reached the desired result. * { margin: 0; padding: 0; } body { background: #007FC1; } .container, .panel { border-bottom: 4px solid #B4CAD8; } .container { background-color: #fff; } .container > .text { padding: 0.5em; } .panel { position: relative; float: right; width: 200px; height: 40px; margin-top: -4px; background-color: #fff; line-height: 42px; text-align: center; } .panel:before { content:

How to skew element but keep text normal (unskewed)

由 江枫思渺然 提交于 2019-12-17 02:37:05
问题 Is it possible to reproduce this image using only CSS? I want to apply this to my menu, so the brown background appears on hover instance I don't know how to do this, I only have; .menu li a:hover{ display:block; background:#1a0000; padding:6px 4px; } 回答1: skew a parent element ( LI ) and inverse skew it's children elements nav ul { padding: 0; display: flex; list-style: none; } nav li { transition: background 0.3s; transform: skew(20deg); /* SKEW */ } nav li a { display: block; /* block or

CSS Progress Circle [closed]

由 ☆樱花仙子☆ 提交于 2019-12-17 00:25:14
问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 4 years ago . I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%. I would like it to stop at certain percentages like in the screenshot below. Is there any way I can do that using only CSS? 回答1: I created a tutorial on how to do exactly

Can I create a div with a Curved bottom?

由 别等时光非礼了梦想. 提交于 2019-12-17 00:12:49
问题 So I'm working on a site and I was wondering if it's possible to, purely using HTML5, CSS3 (and JavaScript if needed), make a div with a curved bottom, so it will look practically like this: Or can this only be done using a background image? <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <ul class="nav"> <li><a href="#">Home</a></li> </ul> </div> </div> </body> 回答1: CSS: div{ background-color:black; width:500px; height:50px; border-bottom-left-radius:50%; border

CSS - show only corner border

由 六眼飞鱼酱① 提交于 2019-12-16 21:05:52
问题 I'm wondering if it's possible in CSS or Jquery to make a border but only for corner. Something like this: **** **** * * * * CONTENT * * * * **** **** 回答1: I would use overlapping divs. One with square corners. And the Other with rounded corner (so it doesn't hide the corners of the first one). <div id="div1" /> <div id="div2" /> #div1 { position:absolute; top:9px; left:9px; height:100px; width:100px; background-color:white; border:1px solid black; } #div2 { position:relative; top:-1px; left:

Transparent arrow/triangle indented

由 送分小仙女□ 提交于 2019-12-16 19:24:11
问题 I would like to make a transparent arrow over an image . This triangle should be indented in a semi transparent block and show the background image. Desired output: .barShow { background-color: #000; opacity: 0.5; } .barShow:before { top: 0%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: #999; border-width: 20px; margin-left: -20px; } <div class="barShow"></div> The transparent CSS Arrow should be

How to concave a straight line with pure css

由 社会主义新天地 提交于 2019-12-14 01:54:28
问题 #diamond{ width: 40px; height: 40px; transform: rotate(45deg); background: red; } <html> <body> <div id="diamond"></div> </body> </html> I'm trying to create a diamond shape with css. However, the diamond that I want to create is not made up of straight lines, but four slightly concave lines, like the bicycle cards. Is it possible to concave a straight line in css? 回答1: Here is an idea using radial-gradient but without transparency: #diamond { width: 40px; height: 40px; transform: rotate

Advice on how to create this button shape

由 久未见 提交于 2019-12-13 16:22:21
问题 I would like to create a button that has 2 slight wings either side but not completely sure how to achieve this shape and was wondering if anyone could offer some guidance? I understand that I will need to use the before and after psuedos but unsure how to create that slight curve going into the main body of the button? 回答1: To give the impression of a 3d plane rotating away from POV, like Star Wars opening crawls (recreated in svg too), use (prefixed) perspective and rotate3d (or rotateX).

Containers have same undesired width

由 做~自己de王妃 提交于 2019-12-13 15:50:17
问题 I have two containers that make up a transparent border that has a 45 degree angle in it. For some reason the second container maintains the same width/padding as the first container. I want the second container to maintain its own width/padding. Essentially, 30px of padding horizontally to each container, but not the same size. What am I doing wrong? Here is a fiddle....Click for fiddle .home-img-text { position: absolute; left: 13%; top: 25%; } #home-img-text-container1, #home-img-text

create an adaptive quadrilateral trapezoid in css

由 ≡放荡痞女 提交于 2019-12-13 15:13:25
问题 Is it possible to create the image shapes in css? I've googled this more than I'd like to admit over the last week without finding a solution. I have been able to semi-replicate it but haven't gotten all the requirements worked out. have a border be responsive adapt to content height (in a cms so I don't have control over the amount of text) work in IE9 It needs to adapt to the content height and be responsive. One attempt I used multiple clip-paths but it fails in IE. jsfiddle <div class=
订阅 css-shapes