css-shapes | 易学教程

How can I make octagon shape box?

阅读更多关于 How can I make octagon shape box?

问题 I want to create the below given box by using CSS. I searched a lot and read very good articles like https://css-tricks.com/examples/ShapesOfCSS/ but I got stuck in one issue - the purple border cutting edges. I tried octagon shape but that is not working for this case. I almost achieved this. Here is my snippet: .box-outer { width: 300px; height: 120px; padding: 15px 30px; background: rgba(237, 236, 236, 0.72); border: 3px solid rgb(89, 67, 128); position: relative; border-right: 20px solid

Center triangle at bottom of div full width responsively

阅读更多关于 Center triangle at bottom of div full width responsively

问题 After hours of trying in CSS (sorry, I'm still a CSS noob) I am asking you for help: I want a triangle to be the "bottom" of a div while filling the whole screen width, no matter what size the screen is (100%). When the window resizes I just want the triangle to change it's width so that it still fills the whole screen width (100%) but not it's height. At the moment the whole thing looks like this (triangle colored black only for demonstration purposes) which judging by the looks is what I

V-shaped sections of page with image background

阅读更多关于 V-shaped sections of page with image background

问题 I'm trying to make a one-page website. But I would like something to diversify it from all other similar sites. I came up with the idea of making a v-shaped sections. I want each section ended with a kind of "v". I do not know how to achieve this effect in css so that there was no need cutting an image that is the background. I have not found any example on the Internet. Here are my attempts: HTML: <div class="wrap" style="z-index: 9999"> <img src="https://farm8.staticflickr.com/7187

Shape oblique bottom border of a div

阅读更多关于 Shape oblique bottom border of a div

问题 I'm building a simple website, and on its landing page I need two backgrounds. For that, I'm using two divs, one on top of the other. So far so good. The problem is, I want the bottom border of the first div (or the top border of the second) to be oblique. This is a sketch of what I want to do: Any idea how to accomplish this? I found this article, but it only works with floating elements, and it doesn't seem stable at all. http://sarasoueidan.com/blog/css-shapes/ Thanks in advance! html: div

How to make this CSS hamburger menu entirely clickable?

阅读更多关于 How to make this CSS hamburger menu entirely clickable?

问题 I am working on a pure CSS hamburger menu icon, so far it's working great, except that the gaps between the lines are not clickable. How can I modify this code so that the entire button is clickable as opposed to just the lines? <a href="#" title="Open Menu" class="menu"></a> .menu { width:30px; height:5px; background-color:#000; position:relative; display:inline-block; } .menu:after, .menu:before { content: ''; width: 100%; height:5px; background-color:#000; position:absolute; } .menu:after

How do I give a CSS octagon shape a full border?

阅读更多关于 How do I give a CSS octagon shape a full border?

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; left: 0; transform: rotate(45deg); background: #777; content: ''; border: 3px solid red; } You can

How can I create a postage stamp border?

阅读更多关于 How can I create a postage stamp border?

问题 I would like a div to look like this: but would only like to use CSS, how would I go about creating a shape like this? Do I create custom border for the top and bottom? 回答1: You can look at the code here, it does exactly what you want: http://codepen.io/orhanveli/pen/tbGJL The code from the website: HTML  <div class="stamp">  <img src="http://thecodeplayer.com/uploads/media/css3logo.png" /> </div> CSS *{margin: 0; padding: 0;} body {

Div elements to follow a curved path with CSS3

阅读更多关于 Div elements to follow a curved path with CSS3

问题 So the basic idea is 1 - 9 seats at a curved table as though you are looking at them through first person view. I'm trying to get div elements which would be seats to flow on the outside of another div element that has a border radius to make it a semi oblong circle. I've found a few examples with an element being animated to flow across the container in an arc, but I will need the div/seats to be static. I am looking for any ideas or examples that can lead me in the right path. 回答1: Finding

How can I use percents in `border-*` properties?

阅读更多关于 How can I use percents in `border-*` properties?

问题 I have code which uses the Twitter Bootstrap 3, nav with right-arrow , which I created using border-* properties. But if I use very long text in right-arrow , it does not expand, and if I use percents, the code will not work... Example on JsFiddle .custom-nav-stacked>li>a { border-radius: 2px; } .custom-nav-stacked>li.active>a:after, .custom-nav-stacked>li.active>a:hover:after, .custom-nav-stacked>li.active>a:focus:after { content: ''; position: absolute; left: 100%; top: 50%; margin-top:

Rectangle with two cut edges

阅读更多关于 Rectangle with two cut edges

I'm not sure what is specific name for this shape but can I just called it "half Parallelogram" ? I want make this shape purely using CSS/CSS3 . Any help? or tutorial? Harry You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach will not work because the border hack needs a solid color background. The advantage of this method is