I'm trying to achieve the border that looks like the image when on hover:
I'm not sure how to describe the border. But any ways to achieve this ?
.text {
width: 100px;
height: 20px;
text-align: center;
}
.text:hover {
border: 1px solid black;
}
<div class="text"> Sample </div>
Using hover with before and after
.text {
position: relative;
width: 100px;
height: 20px;
text-align: center;
}
.text:hover::before,
.text:hover::after {
content: '';
position: absolute;
border: 1px solid black;
border-bottom: 0;
width:100%;
left:0;
height: 20%;
}
.text:hover::after {
bottom: 0;
border: 1px solid black;
border-top: 0;
}
<div class="text"> Sample </div>
You can add ::before and ::after selectors with the same background of the div (here, by default, white) to overwrite the border as follows.
.text {
width: 100px;
height: 20px;
text-align: center;
position: relative;
}
.text:hover {
border: 1px solid black;
}
.text:hover::before,
.text:hover::after {
content: " ";
position: absolute;
background: white;
top: 5px;
height: 10px;
width: 1px;
}
.text::before {
left: -1px;
}
.text::after {
right: -1px;
}
<div class="text"> Sample </div>
A simple border-image can do the trick
.text {
display:inline-block;
padding:10px;
text-align: center;
font-size:25px;
border:2px solid transparent;
}
.text:hover {
border-image: linear-gradient(#000 30%, transparent 0 70%,#000 0) 2;
}
<div class="text"> Sample </div>
Related
I am little stuck and need ur help, actually I am stuck in a problem I need to create an self pointing arrow to a rectangular box in css which I am unable to develop it Any help with example would be appreciated.
To understand the problem better I am attaching the desired output image.
I am also sharing my code what I have tried
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
You can give the second box a pseudo element and style it using clip-path to make a little arrow:
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left-width: 0;
position: relative;
}
.container-2::after {
content: '';
display: block;
position: absolute;
background-color: black;
width: 10px;
height: 10px;
clip-path: polygon(100% 0, 80% 50%, 100% 100%, 0 50%);
bottom: 0;
left: 0;
transform: translateY(50%);
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Perhaps this pseudo element ::after with a unicode arrow?
I additionally removed the left border
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left:0;
}
.container-2::after {
content: "⮜";
position: absolute;
top: 140px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
Removed left border
Added pseudo element::before, could also be div with class arrow
Created triangle arrow
body {
box-sizing: border-box;
margin: 10px;
}
.wrapper {
display: flex;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
}
.container-2 {
margin-top: 4em;
height: 75px;
width: 75px;
border: 1px solid black;
border-left: none;
position: relative;
}
.container-2:before {
content: '';
display: block;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-right: 8px solid black;
border-bottom: 4px solid transparent;
position: absolute;
left: 0;
bottom: -4px;
}
<div class="wrapper">
<div class="container"></div>
<div class="container-2"></div>
</div>
I am trying to recreate these borders over an image with CSS.
I have been able to create one border by using this CSS:
.bordered-image {
position: relative;
outline: 1px double white;
outline-offset: -10px;
}
But I have been unable to create the second border. Is it possible using CSS?
Hope the below code helps
body{
padding:50px;
}
.box{
width:300px;
height:200px;
border:1px solid red;
position:relative;
}
.box:after{
content:"";
position:absolute;
top:-4px;
bottom:-4px;
left:2px;
right:2px;
border:1px solid green;
}
<div class="box" >
</div>
Try the below code
<div class="module">
</div>
-
body {
padding: 20px;
}
.module {
width: 300px;
height: 200px;
position: relative;
border: 1px solid blue;
margin: auto;
}
.module:after {
content: "";
position: absolute;
top: -3px;
left: 1px;
right: 1px;
bottom: -3px;
border: 1px solid black;
margin:auto;
}
img {
border: 1px double black;
padding: 64px;
outline: 1px solid black;
box-sizing: border-box;
outline-offset: 20px;
}
something like this should work for you. You might have to play with the dimensions
body {
background: black;
}
.bordered-image {
position: relative;
height: 300px;
width: 300px;
border: 1px solid white;
margin: auto;
}
.bordered-image:before {
position: absolute;
left:-6px;
top: 4px;
display: block;
content: ' ';
margin: auto;
height: 290px;
width: 310px;
border: 1px solid white;
}
Try this:
.bordered-image {
background:black;
width:300px;
outline: 1px double white;
outline-offset: -10px;
}
.one {
width:300px;
height:300px;
position:relative;
border:1px solid white;
}
.one:after {
content: "";
width: 273px;
position: absolute;
top: 5px;
bottom: 5px;
left: 11px;
right: 2px;
border: 1px solid white;
}
<div class="bordered-image">
<div class="one">
</div>
</div>
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}
I'm trying to figure out how to create a border image for separate divs in the screenshot, yet I can't seem to find a way to do so. Can anyone offer some guidance on how to make these outside border images work?
This is about as close as I can get it. No images required:
.has_tab {
border: 1px solid #e6e6e6;
border-left: none;
width: 33.33%;
height: 300px;
box-sizing: border-box;
display: block;
float: left;
position: relative;
text-align: center;
}
.has_tab:first-child {
border-left: 1px solid #e6e6e6;
}
/* the important bit... */
.has_tab:after {
content: "";
display: block;
width: 10px;
height: 100px;
background: #FFF;
border: 1px solid #e6e6e6;
border-left: none;
border-radius: 0 20px 20px 0;
position: absolute;
top: 50%;
margin-top: -50px;
right: -11px;
}
.has_tab:last-of-type:after {
display: none;
}
<div class="has_tab">Lorem ipsum</div>
<div class="has_tab">Lorem ipsum</div>
<div class="has_tab">Lorem ipsum</div>
Fiddle version
here is how i do it
first you need to cut this image
and then you can use it as background of after element
<div class="borderd-div"></div>
and the css:
.borderd-div{
height: 334px;
width:334px;
border: 1px solid #f1f1f1;
position: relative;
}
.borderd-div:after{
content:" ";
display: block;
position: absolute;
width: 20px;
height: 145px;
right:-19px;
top:83px;
background: url(Djyods1.png) no-repeat 0 0;
}