Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've found plenty of tutorials for creating Trapezoids using CSS3 but I am looking to create a four sided shape where none of the side are parallel (trapezium) like the one in the picture below.
Is this possible?
Okay..Sorry for being late. Here's my answer:
Fiddle: http://jsfiddle.net/fELER/1/
CSS:
#up-triangle {
width: 0;
height: 0;
border-bottom: 200px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
#right-triangle {
position:absolute;
top: 10px;
left:175px;
width: 50px;
height: 100px;
border-style: solid;
border-width: 100px 0 0 300px;
border-color: transparent transparent transparent yellow;
-webkit-transform: skew(29deg);
-moz-transform: skew(29deg);
-o-transform: skew(29deg);
transform: skew(29deg);
}
HTML:
<div id="up-triangle"></div>
<div id="right-triangle"></div>
Some useful links:
http://www.css3shapes.com/
http://apps.eky.hk/css-triangle-generator/
you could do this "by hand"
html:
<canvas id="polygon" />
javascript
var polygon = document.getElementById('polygon').getContext('2d');
polygon.fillStyle = '#f00';
polygon.beginPath();
polygon.moveTo(0, 0);
polygon.lineTo(90,50);
polygon.lineTo(70, 70);
polygon.lineTo(0, 90);
polygon.closePath();
polygon.fill();
this doesn't make shure it's convex and it has no parallel lines. You have to put in the correct coordinates.
Fiddle: http://jsfiddle.net/8t4rZ/
#box {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
CSS trapezoid
Related
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 yesterday.
Improve this question
I have tried multiple ways, but I’ve been running into issues attempting to make a container with diamond shaped edges on either side with the corner rounded, as well as another one with the diamond shape inverted. Similar to my sketch:
Optimally, the solution would only need HTML & CSS, with a different color border and fill. I would definitely be open to alternative solutions if that would include SVG, for example.
Thanks!
I have tried to create a mask with SVGs, but I could not find a way to add a border and a separate fill, as well as containing text inside it, and there were scale issues too (I’d like it only to scale horizontally, not vertically when width changes.)
You can achieve this using the ::before and ::after psuedo-elements in CSS relatively easily. The second one (with non-inverted triangles) is slightly less verbose than the first example, but both are achievable using a single HTML element and some creative CSS.
Please note that you might need to modify some of the pixel dimensions to suit your needs, but the following should achieve what you need:
.label {
background: red;
border: 2px solid #000;
color: #fff;
display: inline-block;
font-family: sans-serif;
margin: 0 30px;
padding: 10px 50px;
position: relative;
text-transform: uppercase;
}
.label::before,
.label::after {
aspect-ratio: 1/1;
background-color: #fff;
border: 2px solid #000;
content: '';
display: block;
height: 28px;
position: absolute;
overflow: hidden;
transform: rotate(45deg);
top: 4px;
}
.label::before {
border-bottom: none;
border-left: none;
left: -16px;
}
.label::after {
border-top: none;
border-right: none;
right: -16px;
}
.label--inverse::before,
.label--inverse::after {
background: inherit;
border: inherit;
}
.label--inverse::before {
border-top: none;
border-right: none;
left: -17px;
}
.label--inverse::after {
border-left: none;
border-bottom: none;
right: -17px;
}
<span class="label">Text</span>
<span class="label label--inverse">Text</span>
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 1 year ago.
Improve this question
I'm going to create an avatar like this picture. how can I do this with css?
avatar with a status circle
You can do like the following :
.img-circle-small {
width: 53px;
height:55px;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;
border: 2px solid #CCC;
margin-bottom: 2px;
}
.status{
width: 16px;
height:16px;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;
border: 2px solid #CCC;
margin-bottom: 2px;
background-color: green;
position: absolute;
}
.temp{
position: relative;
display: inline-block;
}
.topRight{
top: 0;
right: 0;
}
<div class="temp">
<img src="https://www.pngitem.com/pimgs/m/206-2067982_thinking-boy-clipart-and-cliparts-for-free-transparent.png" alt="avatar" class="img-circle-small">
<span class="status topRight"> </span>
</div>
The "border-radius" property is what you want to make the image a circle.
Like this:
#circleProfilePicture
{
width:175px;
height:175px;
position:absolute;
overflow:hidden;
border-radius:50%;
}
For the status circle, I assume you want a regular circle element that you change the color of based on some user status?
You'll need a way to check the status and generate a different page/change the element background depending (if this is all done client side, use JavaScript).
var userStatus = "online";
var circ = document.getElementById( 'div_IWantToChangeColorOf' );
if(userStatus == "online"){
circ.style.backgroundColor = 'green';
} else
{
circ.style.backgroundColor = 'red';
}
If this is more meaningful, like their login status according to the server, you'll need a server side language to generate the page with the appropriate element color.
In PHP you'd do something like this to set the color:
PHP: Change color of text based on $value
and then generate the appropriate page (with modified color circle) to send to the user using the color value you determined based off the user status.
So, use the border-radius property to make the image a circle, and to create a circular div on top of that. Then, once you figure out what "status" you're talking about, change the color using Javascript (on client) or PHP (on server).
Try This
HTML
<img src="path_to/image" style="border-radius: 50%; width: 50px; height: 50px; border-width: 2%; border-style: solid; border-color: grey; ">
<span style="height: 12px; width: 12px; background-color: #bbb; border-radius: 50%; display:inline-grid; top: 0px;"></span>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I can see this has been answered but i've tried all of the solutions yet still have a barely visable HR.
What am I doing wrong?
hr {
background-color: dimgrey;
color: dimgrey;
border: solid 2px dimgrey;
height: 5px;
width: 1000px;
}
Not sure what you consider barely visible but a 5px height is pretty visible. :)
Make sure that you are defining this css after other css which might be overwriting this rule.
Or, use !important to give this rule precedence:
hr {
background-color: dimgrey !important;
color: dimgrey !important;
border: solid 2px dimgrey !important;
height: 5px !important;
width: 1000px !important;
}
Another approach is to define a custom class for this style:
.bigHr {
background-color: dimgrey !important;
color: dimgrey !important;
border: solid 2px dimgrey !important;
height: 5px !important;
width: 1000px !important;
}
... and then use that class when you want this style:
<hr class="bigHr">
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I need to show the divider for every labels is there any option in Bootstrap to show the vertical divider or in css like the below image.
Vertical Dividers have been dropped in Bootstrap 3. See here
You'll have to code on your own
or you can add this code to your style-sheet
.navbar .divider-vertical {
height: 40px;
margin: 0 9px;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #ffffff;
}
This is how I would do it:
li {
display: inline;
padding: 10px;
color: white;
border-right-style: solid;
border-right-width: 2px;
border-image: linear-gradient(to bottom, transparent, gray, transparent) 1 100%;
border-left-width: 0px;
}
Here is the JSFiddle demo
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to create a thin arrow (direction towards right) using css.
I have created the circled div but stuck with the arrow
<div class="circleBase type2"></div>
I have created the fiddle and also attached the reference image
http://jsfiddle.net/squidraj/c9eyrat6/
Any hint/suggestion/reference link would do great. Thanks in advance.
Here's one option using a pseudo-element although an image or SVG would probably be preferable.
JSfiddle Demo
CSS
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
overflow: hidden;
box-sizing: border-box;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
position: relative;
}
.type2:before {
content:"";
position: absolute;
top:0;
right:50%;
width:100%;
height:100%;
border:2px solid white;
transform:rotate(45deg) ;
}
Added a div and gave it a white border check if this suits your interest http://jsfiddle.net/c9eyrat6/6/
#line{
transform:rotate(-10deg);
width:120px;
height:120px;
border:5px solid white;
}