css-shapes | 易学教程

Using css shape to click being an image?

阅读更多关于 Using css shape to click being an image?

问题 I am trying to get an input field and button to work even when they are behind a shaped png image. Now i thought all i had to do was using shape and it would trace the shape. And the button or input field would be editable/clickable .element { float: left; height: 150px; width: 1300px; shape-outside: img('path/to/red-image-with-shape.png'); } ps: this situation is a screenshot when an user scrolls upwards. The designer wants the form elements to be accessible even with these scrolling

Zig zag border on a button which also has an inner dotted border

阅读更多关于 Zig zag border on a button which also has an inner dotted border

问题 I'm trying to do a zig zag border on a button. I have googled one solution, but the zig zag border in this solution is at the bottom, but I needed it at the right side. I was trying to rewrite the solution, but unfortunately the linear gradient is too hard for me. I was only able to create weird shapes. Can you, please, help me to rewrite the solution to be on the right? My CSS: -webkit-mask-image: linear-gradient(0deg, transparent 30px, white 30px), linear-gradient(-135deg, white 15px,

How to create a div with angled corners in CSS

阅读更多关于 How to create a div with angled corners in CSS

问题 I need to create div with angled corners ( not rounded) with 2px border-width at my div: I need a CSS-only solution .center-link { text-align: center; } .continue { text-decoration: none; border: 2px solid #26368d; border-radius: 10px; background-color: transparent; margin: 0 auto; padding: 10px 10px 9px; font-family: 'Raleway'; text-transform: uppercase; font-size: 11px; font-weight: bold; color: #26368d; transition: all 0.5s ease; } <div class="center-link"><a href="#" class="continue"

CSS split a square into 4 triangles

阅读更多关于 CSS split a square into 4 triangles

问题 I am currently trying to make a square be 4 triangles of equal size that have hover events on them. I am creating the triangles like this, .right, left, .top, .bottom { position: relative; width: 26px; } .right:before{ position: absolute; display: inline-block; border-top: 26px solid transparent; border-right: 26px solid #eee; border-bottom: 26px solid transparent; left: 26px; top: 0px; content: ''; } What I am finding is that each triangle sits above one another meaning only one triangle can

How to resize trapezoid in CSS when browser window resize

阅读更多关于 How to resize trapezoid in CSS when browser window resize

问题 I'm trying to get the trapezoid shape resize when I resize browser's window. I was trying to do that by using box-resize but it still didn't work. Is it possible to do that with trapezoid defined/created by using border hack? What other way can I make trapezoid with the ability to resize when browser window is resized? <body style="position:relative;height:500px;"> <div id="personal" style="position:relative; background-color: red; width:100%; height:100%;"> <div id="floor" style="position

How to pinch the middle of a line in css

阅读更多关于 How to pinch the middle of a line in css

问题 I'm trying to make a line that almost looks like it has serifs at the ends. Essentially, I want to make it wider at the very ends and thin in the middle, just using css. This has actually proven to be quite a challenge. Any help would be appreciated. Thus far I've been able to get the bottom to look how I want using the :after pseudo selector, but no luck with the top, which I can only seem to get concave, rather than convex. Here's the code of what I've done so far .line { background:none;

How to apply a specific shape to a div?

阅读更多关于 How to apply a specific shape to a div?

问题 I have this shape to do on a website: Unfortunately, I don't exactly know how to do it. I thought about clip-path , here is some code I tried: HTML (Vue): ... <div class="col-md-7"> <q-gallery-carousel class="gallery-cropper" infinite autoplay :src="gallery"></q-gallery-carousel> </div> CSS: .gallery-cropper { clip-path: polygon( 100% 0%, 100% 100%, 10% 100%, 0% 0% ); } Which gives me this (photos are not the same but you get the thing): Right now, I need to do the top left rounded corner. Do

Border based triangles not rendering as expected

阅读更多关于 Border based triangles not rendering as expected

问题 I am trying to make a full square out of 4 rotated triangles, but when I position them, there is a thin space between. Even weirder, when I rotate the entire thing, the lines disappear in chrome, but appear in the middle of the triangle (forming an X again) in firefox. jsFiddle How can I remove this line without adding background and without losing any of the size? I tried using translate3d , but in every way I tried, it either didn't remove all lines, or reduced the size of the square, which

How to add a half circle at the bottom middle of my header?

阅读更多关于 How to add a half circle at the bottom middle of my header?

问题 Here is how I want it to look: I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS. fiddle is here http://jsfiddle.net/bU3QS/1/ <div class="header"> </div> .header { position: fixed; top: 0; left: 0; width: 100%; background: #000; z-index: 10000; height: 110px; overflow: hidden; } 回答1: Use the :after pseudo element: .header:after { content: ''; position: absolute; background: black

Cut out transparent circle with CSS3

阅读更多关于 Cut out transparent circle with CSS3

问题 I want to make this shape in CSS3. Is it possible? :S My plan is to put a picture in the background so I want that this part be transparent (that round part ) EDIT: The biggest problem is that background is not solid color, it is image and background of div body must be semi-transparent. 回答1: The cut out circle can be made only with CSS using box-shadows. The following demo has fixed height/widths but it is possible to achive the same output with percent size and therefore make it responsive