I want to create a square and a triangle on the top of it with css only, so
I could write some dynamic text in the triangle
It would be easy to dynamically set the triangle color with css at runtime.
Here's one way of doing it:
http://jsfiddle.net/VWdxj/
HTML
<div class="container">
<div class="content">Hello World</div>
<div class="triangle"></div>
</div>
CSS
.container{
border:1px solid #000;
position:relative;
}
.content{
z-index:500;
position:absolute;
top:230px;
left:120px;
color:#fff;
}
.triangle{
border-color: #fff #fff red #fff;
border-width:160px;
border-style:solid;
width:0;
height:0;
position:absolute;
top:0;
left:0;
z-index:2;
}
Related
I made this sorta simple circular loader-thingy, whith two half circles covered with another two half circles that are positioned right on top of them. The covers rotate and reveal the bottom circles to make it look like a circular loading bar.
The problem is that the edge of the bottom circles are visible in some browsers, and there are some mobile browser issues with that as well. Is there a solution for this?
CSS
.wrap{
position:relative;
width:100px;
height:100px;
overflow:hidden;
border-radius:50px;
}
.circle{
position:absolute;
top:0;
width:50px;
height:100px;
background:black;
}
.cover{
position:absolute;
left:0;
width:50px;
height:100px;
background:white;
}
.halfcircleleft{
width:50px;
position:absolute;
top:0;
left:0;
}
.halfcircleleft .circle{
z-index:3;
border-radius:50px 0 0 50px;
}
.halfcircleleft .cover{
z-index:4;
border-radius:50px 0 0 50px;
}
HTML
<div class="wrap">
<div class="halfcircleleft">
<div class="circle"></div>
<div class="cover"></div>
</div>
<div class="halfcircleright">
<div class="circle"></div>
<div class="cover"></div>
</div>
</div>
what about using a circle with transparent background and white border bigger than holeto put it over the border you want to remove?like:
.hole, .hole2{
z-index:99;
position:absolute;
width:86px;
height:86px;
top:7px;
left:7px;
background:lightgrey;
border-radius:50%;
text-align:center;
line-height:86px;
font-family:Arial;
font-size:38px;
padding-right:2px;
}
.hole2 {
background:transparent;
border:4px solid white;
width:106px;
height:106px;
top:-3px;
left:-3px;
}
then just remove the overflow:hiddenof wrapwhich it's not doing anything (at least in your example)
JSFIDDLE
I am trying to make two columns separated by or inside a circle page the second column should have an image it like this :
<div class="step second">
<div id="upload-img"></div>
<div id="sperator">
<div class="circle" id="or"><p class="number" style="padding-left:25%;">or</div>
</div>
<div id="default-img">
<img src=""/>
</div>
</div>
But for some reason the position of the #sperator div is changing with the image my css is bit long so here is a js fiddle for more explaining : here
As you can see the image should be in the same line with the other div but its changing the position of the separator div
You should re-check your html tags. Make sure each tag closed correctly
Here your css :
.step{
position:relative;
width:500px;
height:250px;
border:1px solid black;
}
#upload-img{
position:absolute;
left:0;
top:0;
width:50%;
height:100%
}
#default-img{
position:absolute;
right:0;
top:0;
width:50%;
height:100%
}
#upload-img img, #default-img img{
max-width:100%;
max-height:100%;
}
#sperator .circle{
position:absolute;
height:66px;
width:66px;
background-color:black;
top:50%;
left:50%;
margin:-33px auto auto -33px;
border-radius:50%;
z-index:100;
text-align:center;
}
#sperator .circle p{
font-size:35px;
font-family:futura-book;
color:white;
padding:0 !important;
margin:0;
line-height:60px;
}
.step::after{
content:'';
height:100%;
width:3px;
left:50%;
margin-left:-2px;
z-index:90;
position:absolute;
background-color:black;
}
potition:relative will be an area that will "lock" every potition:absolute inside it.
You can use position:relative as parent div and position:absolute as child div.
Is it possible to design what is shown in image using only html and css?
If yes, how?
If No, what is the alternative?
creating transparent image with 2 colored corners and applying it as background image to div that holds text is in my mind. Is there any better way to do this?
I like to do it using html and css only because then it becomes flexible than using image.
I added the code that i tried. please check. got the desired output. but i would like to know if any improvements can be made ?
<style>
#rules
{
width:200px;
height:100px;
}
#rules .top, #rules .bottom
{
width:200px;
height:10px;
float:left;
}
#rules .top::before
{
content:"";
display:inline-block;
width:40px;
height:10px;
background-color:#000;
}
#rules .left, #rules .right
{
width:200px;
float:left;
height:30px;
}
#rules .left::before
{
content:"";
display:inline-block;
width:10px;
height:30px;
background-color:#000;
}
.center
{
width:200px;
height:20px;
float:left;
text-align:center;
}
#rules .right::after
{
content:"";
display:block;
width:10px;
height:30px;
background-color:#000;
float:right;
}
#rules .bottom::after
{
content:"";
display:inline-block;
width:40px;
height:10px;
background-color:#000;
float:right;
}
</style>
</head>
<body>
<div id="rules">
<div class="top"></div>
<div class="left"></div>
<div class="center">RULES</div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
Personally, I'd achieve this effect using psuedo-elements. Use ::before and ::after for each of the corners, and use their left and top (respectively right and bottom) borders in the colour you want. You can then set their width and height. Be sure to set the "hidden" borders to zero width so that you don't get slanted corners.
If you have a problem implementing this, please feel free to come back with the code you have tried :)
I have a background image and a rectangle made in css above it. What i need is, two semi circles should mask through this rectangle and background image should be seen through this rectangle as shown in the image.
You can do it like this
HTML:
<div id="wrapper">
<div id="rect"></div>
<div id="a">
</div>
<div id="b">
</div>
</div>
CSS:
#wrapper{
position:relative;
width:312px;
height:313px;
background:url(http://i.stack.imgur.com/pZVTb.png);
background-attachment: fixed;
}
#a{
position:absolute;
right:0;
height:120px;
top:100px;
border-top-left-radius:60px;
border-bottom-left-radius:60px;
width:60px;
background:url(http://i.stack.imgur.com/pZVTb.png);
background-attachment: fixed;}
#b{
position:absolute;
left:0;
height:120px;
top:100px;
border-top-right-radius:60px;
border-bottom-right-radius:60px;
width:60px;
background:url(http://i.stack.imgur.com/pZVTb.png);
background-attachment: fixed;
}
#rect{
width:100%;
height:56%;
position:absolute;
top:65px;
background:rgba(120,0,23,.8);
}
FIDDLE
Output:
Change the color and image as you want.!!!!
Also check this : https://stackoverflow.com/a/17751125/1542290
You can do this by controlling the opacity of the rectangle.
Something like this : (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)
The following is the css code
.bckgrnd{
background:url('image.jpg');
width:1000px;
height:500px;
}
.rect{
position:relative;
width:700px;
height:200px;
background:pink;
opacity:0.5;
top:100px;
left:150px;
}
.semi{
height:100px;
width:50px;
background:url(image.jpg);
background-attachment:fixed;
position:absolute;
top:40px;
}
.right{
left:0;
border-radius :0 50px 50px 0;
}
.left{
right:0;
border-radius :50px 0 0 50px;
}
and the html mark up as follows
<div class="bckgrnd">
<div class="rect">
<div class="semi right"></div>
<div class="semi left"></div>
</div>
</div>
Hope this image speaks everything...!!! Need to do this in html + css .. Note: I want the border inside the image.
CSS:
#border {
border:3px dashed white;
border-radius:100px;
width:184px;
height:184px;
position:relative;
left:5px;
top:5px;
}
#image {
background-image:url(table.jpg);
width:200px;
height:200px;
border-radius:100px;
}
HTML:
<div id="image">
<div id="border"></div>
</div>
Adjust the widths and heights as needed.
Demo: http://jsfiddle.net/yGcFx/