I am working on CSS border properties, I have done with border-radius,border,border-width,border-color,border-collapse,border-image,etc. I want my border at the left side of my page as shown in the pic click here for the image to be shown. Can anyone teach me with this. Thank you
You can use pseudo elements to get the border same, you can play with properties to know about how it works.
Below i posted an example
.box {
width:150px;
height:150px;
border-radius:50%;
background:green;
position:relative;
}
.box:before {
content:'';
position:absolute;
top:10%;
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
left:14px;
width:0;
height:0;
display:block;
border-top:10px solid green;
border-bottom:10px solid transparent;
border-right:10px solid transparent;
border-left:10px solid transparent;
}
<div class="box"></div>
Related
This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Closed 8 years ago.
I'm trying to create a hollow css arrow in front of an image.
I got it… but it feels very dirty. Is there any better way to do this?
Cross browser compatibility (IE8+) would be awesome.
SCSS
.arrowwrap {
width:100%;
padding:0;
position:relative;
overflow:hidden;
margin:-$arrow_height 0 0 0;
&:after {
content:'';
position:absolute;
height:$arrow_height;
width:50%;
margin:-$arrow_height 0 0 -$arrow_width;
left:0;
z-index:99999;
background:$box_color;
}
&:before {
content:'';
position:absolute;
height:$arrow_height;
width:100%;
left:50%;
margin:0 0 0 $arrow_width;
z-index:99999;
background:$box_color;
}
.arrowone {
width: 0;
height: 0;
border-style: solid;
border-width: $arrow_height $arrow_width 0 $arrow_width;
/* border-color: transparent transparent #333 transparent; */
border-color:transparent $box_color $box_color $box_color;
margin:auto;
}
}
http://jsfiddle.net/dhs2eba2/
If you want to minimise and remove all unsemantic markup you can do :
DEMO
This technique relies on pseudo elements and therefore prevents the use of unsemantic markup. Pseudo elements are supported by IE8+ see canIuse. It also needs the box-sizing property to enable responsive width (box-sizing: border-box is also supported by IE8+ see canIuse).
HTML :
<div class="wrap">
<img src="http://placekitten.com/800/350" />
<article>
<h1>Hellow World, meow</h1>
</article>
</div>
CSS :
body {
background:#fad;
padding:0;
margin:0;
}
$arrow_width: 20px;
$arrow_height: 20px;
$box_color: #d3d030;
.wrap {
img {
width:100%;
height:auto;
vertical-align:bottom;
}
article{
padding:20px;
background:$box_color;
color:#fff;
position:relative;
}
}
article:before, article:after{
content:'';
position:absolute;
width:50%;
bottom:100%;
box-sizing:border-box;
}
article:before{
left:0;
border-bottom:20px solid #D3D030;
border-right:20px solid transparent;
}
article:after{
right:0;
border-bottom:20px solid #D3D030;
border-left:20px solid transparent;
}
Not sure about IE8, haven't got a copy on my VM, but you could approach it like this instead of pseudo elements
<div class="arrowborder">
<div class="arrrowwrap arrowwrapleft"></div>
<div class="arrrowwrap arrowwrapright"></div>
</div>
.arrrowwrap {
box-sizing:border-box;
width:50%;
z-index:9999999;
float:left;
}
.arrowwrapleft {
border-right: $arrow_width solid transparent;
border-bottom: $arrow_height solid $box_color;
}
.arrowwrapright {
border-left: $arrow_width solid transparent;
border-bottom: $arrow_height solid $box_color;
}
http://jsfiddle.net/dhs2eba2/8/
How could I wrap a border around another border and have them both use inset drop-shadows (like double matting in a picture frame)?
You can accomplish this using the :before and :after pseudo-elements. See jsFiddle demos at end of answer.
HTML
<div class="frame"><img src="../img/logo.png"></div>
CSS
.frame {
display:inline-block;
position:relative;
margin:20px;
z-index:5;
padding:10px;
background:#376b90;
}
.frame:before {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:0;
top:0;
right:0;
bottom:0;
box-shadow:inset 0 0 3px 2px black;
}
.frame:after {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:5px;
top:5px;
right:5px;
bottom:5px;
box-shadow:inset 0 0 3px 2px black;
}
Example Usage
Both shadows outside
One shadow inside, one shadow outside
Both shadows inside
Two inset shadows, one outset shadow, and custom background - Requested by OP
Inset borders - Replicating https://stackoverflow.com/a/10904061/526741
Variable length content
you could nest the divs as shown in - http://jsfiddle.net/nG4Td/2/
<div class="border">
<div class="border2">
<p>hello world</p>
</div>
</div>
css
.border{
border: 5px inset black;
background:#ccc;
width:200px;
height:200px;
padding:20px;
}
.border2{
border: 5px inset black;
background:#eee;
width:150px;
height:150px;
padding:20px;
}`
Here are my fiddle's on the topic
OPTION 1)
You can use Pseudo Classes to accomplish this
Html
<span class="doubleMatt">
<img src="http://lorempixel.com/400/200/" />
</span>
CSS
span,img{padding:0;margin:0;border:0;}
.doubleMatt{
position:relative;
display:inline-block;
font-size:0;
line-height:0;
}
.doubleMatt:after{
position:absolute;
top:1px;
left:1px;
bottom:1px;
right:1px;
border:4px solid rgba(255,255,255,0.5);
outline:1px solid rgba(0,0,0,0.2);
content:" ";
}
OPTION 2)
You can use some basic (one dimensional) goodness
CSS
.basicMatt {
background:#222;
padding:3px;
border:3px solid #666;
}
HTML
<img class="basicMatt" src="http://www.lorempixel.com/400/200/" />
OPTION 3)
you can use an Outline
CSS
.outlinedMatt{
background:#fff;
padding:8px;
border:3px solid #222;
outline:3px solid #666;
margin:3px;
}
HTML
<img class="outlinedMatt" src="http://www.lorempixel.com/400/200" />
I want to show a search icon over the start of the a text input box.
Currently my code looks like this:
<div id="search-icon"></div>
<input type="text" name="search" id="search"/>
And my CSS:
#search-icon {
display:inline-block;
background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
}
input#search {
position:relative;
top:-25px;
left:-30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;
}
It shows the div right where I want it, but below the actual text box. When I change the search icon position to absolute, it screws up my positioning.
How do I swop it?
You can solve it using relative position for both. But just change their z-index.
#search-icon {
background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
position: absolute;
z-index: 2;
}
input#search {
position:absolute;
top:15px;
left:30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;}
is this what you are looking for here
Are you talking about having search-icon being on top of input#search?
Such as this: http://jsfiddle.net/52YfE/?
I dont know what you want exactly but check it out this one http://jsfiddle.net/V8AZE/
I am trying to make the css curve box with gradient and shadow as well as.
so how i can make with pure css and it should be only in one div not much code.
For reference see the attached image:-
you just make is border-radius as like this
Css
div {
width:200px;
margin:auto;
margin-top:20px;
height:200px;
background:red;
border-radius:25px;
box-shadow: inset 0 0 15px rgba(68,68,68,0.8);;
position:relative;
}
div:beforae {
content:"";
position:absolute;
border-left:15px solid blue;
border-right:15px solid green;
height:200px;
border-radius:15px 0 0 15px;
}
HTML
<div></div>
and now check to live demo http://jsfiddle.net/rohitazad/Vsvg2/74/
How does one create the triangle thing for a container that points to something? Is it photoshop?
It can be done in pure CSS, but an image would be the more sane option.
HTML:
<div id="bubble">
Yes we can
<div id="arrow"></div>
<div id="arrow-border"></div>
</div>
CSS:
#bubble {
border:2px solid #036;
font-size:20px;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:100px;
position:relative;
}
#arrow {
border-color: #036 transparent transparent transparent;
border-style:solid;
border-width:20px;
height:0px;
width:0px;
position:absolute;
bottom:-40px;
left:20px;
}
#arrow-border {
border-color: #fff transparent transparent transparent;
border-style:solid;
border-width:20px;
height:0px;
width:0px;
position:absolute;
bottom:-37px;
left:20px;
}
If you look here:
http://flowplayer.org/tools/demos/tooltip/index.html
The image that makes the tooltip thingy you're looking at is found here:
http://flowplayer.org/tools/img/tooltip/black_arrow.png
For a CANVAS (non-image) version, see jQuery's BeautyTips:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
CANVAS is like drawing to the screen. Don't ask me for an example, since I've never used it and I'm not real sure how it works. :P Note, browser support may be an issue with CANVAS.