css-shapes | 易学教程

CSS triangle filling for a progress bar

阅读更多关于 CSS triangle filling for a progress bar

问题 I actually googled and searched some info but couldn't find it. My aim is to achieve something similar to progress bar styling such as filling inside of triangle. Is there any ways? JSFiddle .angle { width: 0; height: 0; border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 75px solid black; } 回答1: In order to make the triangle, I would use two pseudo elements to 'cut it out' of the square div. Then, with a nested div, use absolute positioning to allow you

How to make diagonal div

阅读更多关于 How to make diagonal div

问题 I'm trying to make diagonal div, so i could create this shape: I use bootstrap grid, and I already made three div containers for the shape. It will be made by 3 parts, 2 of them is diagonal and one is straight. I made the 3 parts. but i don't know how to make it diagonal. example in codepen html: <body ng-app="appt" ng-controller="AppController" > <div class="row test-row"> <div class="col-lg-4 test-outbox"> <div class="test-inbox test-inbox-center col-lg-10 col-lg-offset-1"> <span class=

Div/Button with a circle shaped container to the left of it

阅读更多关于 Div/Button with a circle shaped container to the left of it

问题 Can I ask a little help about creating that shape with CSS? The button needs a circle for the icon, and the simple box for the text. 回答1: Here is a possible version using the :before pseudo element. The pseudo element is converted into a circle by using border-radius: 50% and is then positioned before the rectangular div#menu as required. You can add a image (like the one in question) to the pseudo element by using the content property like shown below: content: url(http://yoursite.com

How to create responsive triangle as right border?

阅读更多关于 How to create responsive triangle as right border?

问题 I am trying to make a responsive triangle for one border, which will be visible only on hover . I tried the below code but it doesn't work because it uses static border-width . When I have one-string (single line) link it's perfect, but when strings more (more than one line), it's failing. Example here Code here: <ul> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">Lorem ipsum dolor sit amet</a></li> </ul> SCSS here: ul{ width:120px; li{ list-style

Help creating HTML page with curved header section

阅读更多关于 Help creating HTML page with curved header section

问题 I was wondering, what is the best way (using html, css, and graphics) to create a web page whose top header section appears to be beveled, as opposed to straight across? Please see the below image as an example: I'm not sure how to use images in a way such that they would expand/contract in accordance with different browser sizes/resolutions... Can anyone offer me some help? Or perhaps point me to a resource? Thanks! 回答1: You could use border-radius . See my example on jsFiddle. 回答2: Mine is

CSS for inverted curved tabs

阅读更多关于 CSS for inverted curved tabs

问题 I've gotten stuck on how to code the css for these inverted curvy tabs that were supplied by a design agency. see here: http://max-guedy.com/images/tab.png 回答1: EDIT added example with hover state . I created a demo how I would do it: jsBin demo We set the brown color to the whole ul element a 25x52 sprite image .png of the curve : (will change bg-position on hover) http://img401.imageshack.us/img401/258/bg2d.png that we will set to the li element but with no bg color. The most importsnt here

Create Up and Down arrow icons or buttons using pure CSS

阅读更多关于 Create Up and Down arrow icons or buttons using pure CSS

问题 I am trying to create below shown "up and down" control buttons using pure CSS and no Background image. But when I added the CSS for arrows in " li.className:after or li.className:before " the position of main boxes moved. Here is the Fiddle for the issue I am getting > http://jsfiddle.net/8usFk/ Below is the Code for the same: HTML <div class="positionCameras"> <ul> <li title="Move Up" class="cameraLeft" id="cameraUp"></li> <li title="Camera" class="cameraIcon"></li> <li title="Move Down"

Change the shape of the triangle

阅读更多关于 Change the shape of the triangle

问题 I am trying to make the active list item look like this: This is what I currently have (the blue triangle is a right triangle instead of an obtuse isosceles): Here is my HTML: <ul class="guideList"> <li><a>Consulting</a></li> <li class="active">Law<span class="activePointer"></span></li> <li><a>Finance</a></li> <li><a>Technology</a></li> </ul> Here is my CSS: .guideList{ font-size: 12px; line-height: 12px; font-weight: bold; list-style-type: none; margin-top: 10px; width: 125px; } .guideList

Responsive triangle div

阅读更多关于 Responsive triangle div

问题 I'm trying to create a responsive triangle div which will sit at the top of the page as a header. I was able to achieve that with the following code: div{ width: 0; height: 0; border-style: solid; border-width: 200px 400px 0 0; border-color: #007bff transparent transparent transparent; } <div></div> The problem is that I want this triangle to be responsive to the width of the page and change proportionally in height as well. I tried setting width and height to percent based, however that

CSS triangular cutout with border and transparent gap

阅读更多关于 CSS triangular cutout with border and transparent gap

问题 I need to draw the following pattern with CSS as a separator between sections of my page: Using the skewX() technique from this answer, I was able to mimic the triangular cutout accurately (two pseudo-elements are appended to the top of the lower section, one skewed left and one skewed right, so that the background of the upper section shows through): But I can't figure out how to then add the border, as shown in the first image. The problem is that the gap between the border and the lower