I have found information on how to create various shapes, such as trapezoids and hearts, using only CSS; however, they are solid shapes. Is there a way to create a shape, such as a trapezoid, that is transparent and only displays an outline/border?
By making two shapes and overlapping them, with one larger than the other, it is possible to make it appear to have this effect, but that would only work if the background behind the shape is a solid color, which may not always be the case. Thus the reason for the transparency.
For examples of the CSS shapes: link; look at the triangles, for example.
Thank you.
This is usually done with border tricks, and those are not really helpful for this
You need others techniques for that.
For instance, see this CSS
body {
background: linear-gradient(90deg, lightblue, yellow)
}
.trapezoid {
left: 50px;
top: 50px;
position: absolute;
height: 100px;
width: 500px;
background-color: transparent;
}
.trapezoid:before {
content: '';
width: 57%;
height: 100%;
left: -4%;
position: absolute;
border-color: red;
border-style: solid;
border-width: 3px 0px 3px 3px;
-webkit-transform: skewX(-20deg);
}
.trapezoid:after {
content: '';
width: 59%;
height: 100%;
right: -4%;
position: absolute;
border-color: red;
border-style: solid;
border-width: 3px 3px 3px 0px;
-webkit-transform: skewX(20deg);
}
fiddle
The base element has the background transparent, as per your request. I have set a gradient in the body to verify it.
The you add 2 pseudo elements, that have the borders set (except the inner one), and that are skewed to achieve the trapezoid
You can set background color to transparent
background-color: transparent;
The way that these shapes are typically done in css is through border manipulation. When you have a transparent trapezoid it's just a rectangle with the sides lopped off by a border. Because of this, there is no way to use a uniform border and maintain the same shape.
What's your current code look like? You should just be able to add a border to it and no background color. Example: http://jsfiddle.net/tBBkg/
Overlapping transparent shapes (with border):
#square {
width: 140px;
height: 140px;
border: 2px solid blue;
position: absolute;
}
#circle {
position: absolute;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 2px solid pink;
}
Perhaps I'm not understanding the question properly, in which case could you clarify?
Related
If you see it closely there's a little blue line between the border and the profile image.
How do I remove the little background colour/line(of the background image) between the border and the jpg?
here's my css code:
.profile-pic{
border-radius: 50%;
position: relative;
position: relative;
top: -55px;
border: 5px solid white;
This is due to how webpages render borders with antialiasing. The edge of the border has a slight transition to transparent to look smoother. The same thing is done to the image, so the result is a little bit of the background shows through.
Notice you can see a little bit of red around the image in this snippet.
body
{
padding: 50px;
background-color: red;
}
img
{
border-radius: 50%;
position: relative;
top: -55px;
border: 5px solid white;
width: 100px;
height: 100px;
}
<img src="https://placeimg.com/100/100/people"/>
In your example you can see this extra well because the blue line you mention is only around the part of the image that is over the blue section of the parent view. The bottom, which is over white, doesn't have the same effect.
You can fix this by putting whatever color you want as the background color of the image so when the antialiasing happens, your color shows through. I went with white to match the border color.
body
{
padding: 50px;
background-color: red;
}
img
{
border-radius: 50%;
position: relative;
top: -55px;
border: 5px solid white;
width: 100px;
height: 100px;
background: white;
}
<img src="https://placeimg.com/100/100/people"/>
The title says it all, I've just discovered that IE (9 - 11) automatically applies about 50% opacity to any element's border with border-style: dotted.
The weirdest thing is, it only happens on dotted in particular, solid and dashed are fine.
You can test it yourself: http://jsfiddle.net/ptv74f4q/1/
Any ideas?
This appears to be due to IE anti-aliasing the dotted border. If you make the border-width bigger than 1px (say 5px) the border will appear white again.
One way to get around this would be to overlay some pseudo elements with the same dotted border on top to counteract the opacity:
div {
width: 200px;
height: 200px;
background: #000;
}
span {
transform: rotate(0deg);
display: inline-block;
width: 180px;
height: 85px;
line-height: 85px;
text-align: center;
margin: 8px 8px 0 8px;
border: #fff 1px solid;
color: #fff;
position: relative;
}
span.dotted {
border-style: dotted;
}
span.dotted::before, span.dotted::after {
border: #fff 1px dotted;
content: "";
height: 100%;
left: -1px;
position: absolute;
top: -1px;
width: 100%;
}
<div>
<span>I'm with normal border</span>
<span class="dotted">I'm with dotted border</span>
</div>
JS Fiddle: http://jsfiddle.net/oyrbLyjc/1/
Alternative method
Alternatively you could try using border-image. There are online tools (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator) that would be able to help you generate a similar border using this method.
Hey currently I have this css to produce a css arrow but I cannot seem to get a drop shadow on it any ideas
.arrow {
width: 0px;
height: 0px;
border-style: solid inset;
border-width: 10px 78px 0 78px;
border-color: #000 transparent transparent transparent;
z-index: 1;
}
I have dabbled with :after and :before but with no success
Since your arrow is going to be placed under a solid rectangle, this can help you
.demo {
position: absolute;
top: 50px;
left: 0px;
width: 200px;
height: 50px;
clip: rect(0px 400px 100px 0px);
}
.demo:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
-webkit-transform: translate(-90px, -45px) skew(80deg) rotate(-5deg);
-moz-transform: translate(-90px, -45px) skew(80deg) rotate(-5deg);
transform: translate(-90px, -45px) skew(80deg) rotate(-5deg);
box-shadow: 30px 1px 6px blue;
}
fiddle compared with your original arrow
The problem is that the shadow can not go upwards, but usually this design wouldn't need that anyway.
Also, the base div is highly distorted, so you will need to set the shadow by trial and error.
http://css-tricks.com/triangle-with-shadow/
I think that's what you're looking for, it explains two methods to get a shadow on arrows with CSS.
One is to use a unicode triangle character and apply a shadow to that, the other is using CSS trickery with the :after selector and CSS transform.
How can I make the following shape in CSS3, without using pseudo-classes like ":before"?
I did it very easy with :before, but the thing is that I don't want to have a solid element on the gray area (see JSFiddle - http://jsfiddle.net/aUdLr/2/)
div{
width: 100px;
height: 100px;
background-color: red;
border-radius: 100%;
position: relative;
}
div:before{
content: "";
width: 100%;
height: 110%;
background: gray;
position: absolute;
left: 5px;
top: -5%;
border-radius: 100%;
}
You can use border width:
div{
width: 100px;
height: 100px;
border-radius: 100%;
border-width: 0;
border-left:solid 10px red;
}
Scientifically inaccurate example: http://jsfiddle.net/aUdLr/4/
Keep in mind that the outer shape is not a perfect circle, because the border is added to the width. You can compensate by reducing the width, or by using Box-sizing: Border-box.
To get the effect of a small circle eclipsed by a larger circle, you can add a shadow to a transparent element:
div{
width: 100px;
height: 100px;
border-radius: 100%;
background-color:transparent;
box-shadow: -23px 0 0px -15px #ff8;
}
Example: http://jsfiddle.net/aUdLr/6/
Simplest CSS3 solution that comes to my mind:
div:before {
font: 80px serif;
color: red;
content: "(";
}
Here's a fiddle.
(Now seriously- if you want a good amount of control over the shape, I suggest to use SVG.)
I'm trying to do something like this:
The boxes have shadows and the background of the corners must be transparent because they are over an image (unpredictable background).
After searching Google, I found solutions using pseudo selectors :before and :after as well as solutions using extra markup, but all of them use a fixed colour background. These were my results:
I'm trying to use box-shadows and only a small image for the corner, instead of a large complete background.
How I can do this?
Use both the pseudo-elements, one for the upper box, the other for the white triangle:
h1 {
background: #F0B032;
box-shadow: 1px 1px 4px #362708;
line-height: 30px;
position: relative;
}
h1:before, h1:after {
content: '';
position: absolute;
left: 100%;
}
h1:before {
background: #F0B032;
box-shadow: 1px 1px 2px #362708;
width: 15px;
height: 16px;
top: 0;
}
h1:after {
border: 7px solid transparent;
border-left-color: #fff;
border-top-color: #fff;
bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/Kjp6v/
This does not add a shadow under the fold, but looks realistic enough.