css-shapes | 易学教程

Pure CSS star shape [duplicate]

阅读更多关于 Pure CSS star shape [duplicate]

问题 This question already has an answer here: How do CSS triangles work? 18 answers There are a lot of CSS shapes shown on CSS Tricks. I am particularly surprised by the star: How does the CSS below create this shape? #star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; transform: rotate(35deg); } #star-five:before { border-bottom: 80px solid

How can I animate the drawing of text on a web page?

阅读更多关于 How can I animate the drawing of text on a web page?

I want to have a web page which has one centered word. I want this word to be drawn with an animation, such that the page "writes" the word out the same way that we would, i.e. it starts at one point and draws lines and curves over time such that the end result is a glyph. I do not care if this is done with <canvas> or the DOM, and I don't care whether it's done with JavaScript or CSS. The absence of jQuery would be nice, but not required. How can I do this? I've searched exhaustively with no luck. I want this word to be drawn with an animation, such that the page "writes" the word out the

Triangle in CSS inside a box [closed]

阅读更多关于 Triangle in CSS inside a box [closed]

Well I don't know how to explain it correctly. Here, check this screenshot which has what I want to make. My designer gave me this. If I don't find a solution i'll use images and no code. Is it possible to do this with CSS3? Here is the image See the triangle inside that box? I want to do this. Thank you! Creative use of borders to achieve this effect, no images were harmed in the following sample and you can even set the position of the arrow on the element itself - becomes more straightforward if you can hardcode it for your design. HTML <div class="top"> <span class="arrow" style="left:40%"

How to create a polygon shape div

阅读更多关于 How to create a polygon shape div

I would like to create HTML element like on image here: A problem is the DIV element has polygon shape instead of regular rectangle, will be placed above other elements as something like popup and inside that element there is necessary to show an image with rectangular shape in source but showed on web like filling all space included triangle on the left side. Do you think is there any possibility to realize that without preparing showed images as transparent PNGs in proper polygon format? Only by CSS3 transform or use canvas or SVG? One method could be to split the image into two containers

transparent shape with arrow in upper corner

阅读更多关于 transparent shape with arrow in upper corner

Please see the image below. I want to add an arrow to the top right of a div which I am treating as editable input box. Please help me how I can achieve this using CSS. I cannot use a SVG since I need this as a div to show emoticons as images over it. <div placeholder="Your message" id="Message"> ... </div> You can do it like in the below snippet. The method used to achieve the shape is as given below: The main div element only has a top, bottom and left border. The right border is nullified because the element and its arrows needs to be transparent. With a transparent arrow, if a right border

Div with a transparent cut out circle [duplicate]

阅读更多关于 Div with a transparent cut out circle [duplicate]

问题 This question already has answers here : Transparent half circle cut out of a div (8 answers) Closed 5 years ago . Can I make a rectagle div with a half cut out circle using CSS? The half circle should be transparent and let the background show through. desired CSS shape : HTML : <div></div> CSS : div{ background : #448CCB; width:300px; height:300px; } 回答1: in order to have the white cut out circle transparent and let the background show through it, you can use box-shadows on a pseudo element

Three colors angled background color

阅读更多关于 Three colors angled background color

问题 How could I achieve a background that looked similar to this image: Only 3 colors, angled from the top corner out like a sunray. Maybe sticking with a simple PNG or SVG background image would be a better approach. 回答1: The effect can be achieved with CSS using pseudo-elements and transforms and the below is a sample snippet. But I don't think using CSS is the correct option for this. It would be better to use a PNG image. The snippet uses a couple of pseudo-elements with different background

Is a CSS Arch using border-radius possible?

阅读更多关于 Is a CSS Arch using border-radius possible?

问题 I'm trying to create an arch using just CSS. I've looked into various "inset border-radius" questions, but all of them show how to inset corners, not the middle section of an object. I'm looking for a way to inverse the middle of an object to create an arch like a bridge. Included is an example image to show the sort of thing I'm trying to achieve. Edit: An important part of this arch is that it will be placed over other objects. Simply whiting it out isn't a solution, rather just a temporary

How to make half-square background in css

阅读更多关于 How to make half-square background in css

问题 Is it possible to make in pure css background for half square like on the image. I know that it can be done with an image as background, but I need to use 5 different colours, and maybe in future the colours can be changed. 回答1: If your divs have fixed sizes, you can use borders to make two triangles as described in How do CSS triangles work?: div{ display:inline-block; border-top:100px solid red; border-right:100px solid grey; } <div></div> To make other sizes, colors, you need to tweak the

Show border triangle in navbar using CSS

阅读更多关于 Show border triangle in navbar using CSS

问题 I am trying to create a nav bar with an arrow under the item hovered upon. Here's is what I am trying to make: For the arrow I have used the pseudo elements before and after . Here is some of the code: body { background: #FFFFFF; color: #FFFFFF; margin: 0px; padding: 0px; height: 100%; } .clear { clear: both; } .page-wrap { width: 980px; margin: 0px auto; height: 100%; } #main-menu { background: white; height: 55px; width: 100%; padding: 0px; margin: 0px; border-bottom: 1px solid black; } ul