css-shapes

问题 I'm trying to get a CSS-only solution for a cut-off bottom right corner on every image in a page. So far, I have come up with this: img::after { content: url(/images/whitecorner.png); height: 20px; width: 20px; display: inline-block; float: right; } But the doesn't appear in the document anywhere. (I'm using the Chrome inspector). I hope someone can point me in the right direction. Thanks in advance! 回答1: Example You can not use ::after with img . Same with input s, this is because they are

问题 I recently ran into a PSD template that has an unusual border with triangles. I know how to create triangles by itself using pure CSS, but the question is (just for interest) about this images: Are these created just by a background that is already cut like this, or can I do it using the same CSS? 回答1: There are multiple ways in which this shape could be achieved. Using clip-path , CSS triangles, SVG, Canvas and image backgrounds are some of them. Each method has their own pros and cons. We

问题 This question already has answers here : Border with a transparent centred arrow (3 answers) Closed 3 years ago . I am trying to generate a straight horizontal line with a breakdown in the middle to display an arrow. The idea is that the content displayed under the line will provide details about the content displayed above the line. Here is what the line should look like: I am trying to generate this with pure HTML and CSS (no bitmap images). Use of Font Awesome is acceptable if it ends up

问题 I am trying to restyle Select box. Want to add a CSS arrow (looks nice when zooming the page), which would rotate as the Select box would expand, but I am not able to align the arrow properly according to the Select box. Tried to use some code from the internet, but it doesn't work for me. Also can't make the arrow rotate down when Select box expands. Question: How to align the arrow properly? How to make it rotate down on user's click on the Select box? Here is a fiddle : http://jsfiddle.net

问题 I was wondering if there is a library that anyone is aware of that can handle wrapping text inside custom shapes? I'm attempting to build a module for a friends site that deals with engraving on jewellery. This module would need to be able to preview to the customer in real time what their text would look like on the product. As the Jewellery comes in different shapes and sizes, I need a way to wrap the entered text to inside different custom shapes like in the image below. I've already coded

问题 I am trying to take this css Octagon and give it a solid red border. However, when i add the border it only works on portion of the shape. Does anyone have a solution for this? Here is a JS FIDDLE HTML <div class='octagonWrap'> <div class='octagon'></div> </div> CSS .octagonWrap{ width:200px; height:200px; float: left; position: relative; } .octagon{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .octagon:before { position: absolute; top: 0; right: 0; bottom: 0;

问题 Just realized I have yet to see this. But can not believe it isn't possible. I'm looking to draw a triangle in pure CSS/HTML. An equilateral if possible. Clarification: I don't wish to use an image to achieve this. You would need to be able to put content inside the div. 回答1: One Solution Diagonals are not easy. One solution is to overlay pseudo-elements to create the border, assuming you are dealing with solid background colors. Then you have to position the content to make it look nice. You

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 4 years ago . I want to design a shape as similar as the following image(effect between circle and rectangle): I know the circle shape is designed using border-radius and the rectangle like shape is designed with some unordered list having style display: block . But I can't understand how to

问题 I want to use basic CSS to make triangle in an HTML page. I am using triangle pics which take time to load, so, I want to decrease loading time of my page. 回答1: Not possible with HTML, but with CSS. Example: <div class="triangle></div> .triangle { width: 0; height: 0; border: solid 30px; border-color: transparent transparent black transparent; } Live demo: jsFiddle 30px in the border property defines the size: width and height. You can change it if you want a smaller or a bigger triangle. if

问题 how to make a button with an obtuse angle? I would like to happen like this I got here so My code - Fiddle *{ box-sizing: border-box; } .btn{ display: inline-block; padding: 16px 30px; color: #fff; border: 1px solid #4A803C; position: relative; border-radius: 3px; background: rgb(74,168,28); /* Old browsers */ background: -moz-linear-gradient(top, rgba(74,168,28,1) 0%, rgba(63,155,19,1) 100%, rgba(56,146,12,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(74,168,28,1) 0%