I am trying to make a header as shown in the image attached. I tried the other answers on this website too but none actually helped very much.
I already have figured out the text and logo parts but need someone to help with the slanting div borders.
The effect that I want:
Try This:
header {
border:1Px solid;
height: 200px;
position: relative;
}
header:before, header:after {
position: absolute;
width: 0;
height: 0;
content: '';
border-width: 100px;
border-style: solid;
}
header:before {
left: 0;
border-color: transparent transparent transparent #000;
}
header:after {
right: 0;
border-color:transparent #000 transparent transparent ;
}
<header></header>
Depending on what you have going on in your header, you could try using triangles to mimic the slanted borders;
header{
width: 100%;
height: 200px;
background: #2c2d2e;
}
.triangle-right {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
position: absolute;
left: 0;
border-left: 200px solid white;
}
.triangle-left {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-right: 200px solid white;
position: absolute;
right: 0;
}
<header>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</header>
Related
I want to have a div element that acts like a checkbox. When a user clicks it once, a checkbox will appear in the upper-left corner. If a user clicks the div again, the checkbox will disappear. Currently, I'm using the following CSS, which can be seen in this Fiddle.
.my-checkfield {
border: solid 1px black;
color: black;
padding: 24px;
position: relative;
}
.my-checkfield-selected {
border: solid 1px green;
}
.my-checkfield-selected::before,
.my-checkfield-selected::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.my-checkfield-selected::before {
border-width: 0;
}
.my-checkfield-selected::after {
border-radius: 0;
border-width: 12px;
border-left-color: green;
border-top-color: green;
}
As shown in the Fiddle, the triangle successfully toggles. However, I want to show a white checkmark in that triangle. How can I do that, preferably with CSS. I'm not sure where to go.
Thanks,
By swapping the ::before/::after, so the ::before is used for the green corner, you can simply add content: '\2713' (\2713 is the CSS code for a checkmark) to the ::after
function toggle(elem) {
$(elem).toggleClass('my-checkfield-selected');
}
.my-checkfield {
border: solid 1px black;
color: black;
padding: 24px;
position: relative;
}
.my-checkfield-selected {
border: solid 1px green;
}
.my-checkfield-selected::before,
.my-checkfield-selected::after {
content: '';
position: absolute;
top: 0;
left: 0;
border-color: transparent;
border-style: solid;
}
.my-checkfield-selected::after {
content: '\2713';
font-size: 13px;
line-height: 13px;
font-weight: bold;
color: white;
}
.my-checkfield-selected::before {
border-radius: 0;
border-width: 12px;
border-left-color: green;
border-top-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-checkfield" onclick="toggle(this)">
[hi]
</div>
You can't put anything in an element (or pseudo-element) that is only made of borders.
As such, you would need to, as a suggestion, use a square pseudo-element, with an image as a background and then have a second gradient background as the color.
.my-checkfield {
border: solid 1px black;
color: black;
padding: 24px;
position: relative;
}
.my-checkfield::before,
.my-checkfield::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
background-image:
url(http://www.clker.com/cliparts/p/e/X/9/d/4/check-mark-white-md.png),
linear-gradient(135deg, green 50%, transparent 50%);
background-size: 70% auto, cover;
background-position: auto, left top;
background-repeat: no-repeat;
}
<div class="my-checkfield" ) ">
[hi]
</div>
Trying to figure out how to create a gap in a CSS left border around an image via CSS or JavaScript/jQuery.
I've found several answers how to do this with a gap on the top or bottom border, but couldn't figure out how to apply this to a left border.
Here (https://ibb.co/cGS0vk) is an image of what I try to achieve.
Here is my HTML so far:
<div class="frame">
<img class="quote" src="quote.jpg">
<h2>Heading<h2>
<p>Lorem ipsum<p>
</div>
And here is the CSS:
.frame {
Border-top: 10px sloid grey;
Border-right: 10px sloid grey;
Border-bottom: 10px sloid grey;
}
.quotes {
position: relative;
right: 100px;
}
You can do it by using pseudo elements like :before and :after.
.box {
position: relative;
overflow: hidden;
width: 100px;
height: 50px;
border: solid #000;
border-width: 5px 5px 5px 0;
}
.box:before,
.box:after {
content: '';
position: absolute;
background: #000;
height: 30%;
width: 5px;
top: 0;
left: 0;
}
.box:after {
top: auto;
bottom: 0;
}
<div class="box"></div>
Best idea I can come up with using minimal amount of requirements:
Use the ::before/::after pseudo elements to place a background-color-matching element over top of an existing border. This essentially "slices" part of your border away.
HTML:
<div class="wrap">
<div class="box"></div>
</div>
CSS:
.wrap { position: relative; width: 300px; height: 300px; background-color: #fff; }
.box { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 200px; height: 200px; border: 10px solid #8af; }
.box::before { content: ''; position: absolute; width: 10px; height: 100px; margin: auto; left: -10px; top: 0; bottom: 0; background-color: #fff; }
JSFiddle: https://jsfiddle.net/gam9s0mz/
Edit As noted, this method wouldn't work well with a background image. But only with solid background color matching.
I would like my inner div to be on the bottom-right corner of the outer div, by using float: right, but for some reason, it'll staying on the bottom-left corner. What am I doing wrong?
#outer {
width:100%;
height:20%;
border: 1px solid black;
position: absolute;
}
#inner {
width: 50px
height: 50px;
border: 1px solid red;
position: absolute;
float: right;
bottom: 0;
}
<div id = 'outer'>
<div id = 'inner'>
bottom-right corner;
</div>
</div>
Add right: 0 instead.
Floating the element won't have any effect on it if it's absolutely positioned.
#outer {
width: 100%;
height: 20%;
border: 1px solid black;
position: absolute;
}
#inner {
width: 50px height: 50px;
border: 1px solid red;
position: absolute;
bottom: 0;
right: 0;
}
<div id='outer'>
<div id='inner'>
bottom-right corner;
</div>
</div>
change css property for outer div as below:
#inner {
width: 50px
height: 50px;
border: 1px solid red;
position: absolute;
bottom: 0;
right:0
}
I was wondering if its able to have a square that has a point on the right side of it something like this in just one css:
http://prntscr.com/59wn94
I tried to make one just by using one div I wasn't able to manipulate enough its much easier for when creating a square then just add up a triangle right to it. but I want something that is on just on css like a combination of square and triangle-right.
Here is my http://jsfiddle.net/wbZet/1311/ . I just improvised some fiddle to create this stuff.
<div id="nav">
<a>PLAY</a>
</div>
<div id="triangle-up" />
#triangle-up {
width: 0;
height: 0;
border-left: 35px solid red;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
float: left;
}
#nav {
float:left;
display: block;
height:50px;
padding: 0px 10px;
background: red;
}
#nav a {
margin: 25px 0px;
}
Use Pseudo-elements - CSS
div{
position: relative;/*it important to set this to relative to be able to use :before in absolute*/
width: 60px;
height: 40px;
background: red
}
div:before{
content: '';
position:absolute;
left: 100%;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red
}
<div>Play</div>
Visit http://onecraftyshop.com
You will see the grey box on the first section with a star. If you look at the html it will be under #av_section_2 as .arrow-down.
I'm inserting the .arrow-down class using jQuery.
jQuery('#av_section_2').prepend(jQuery('<div class="arrow-down"></div>'));
And here is my css for the styling:
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
position: absolute;
top: 0px;
left: 50%;
}
So i'm sure that the jquery is fine as it is displaying on the page, but for some reason I can't get the css to make a triangle.
How can I fix this? the corrected css would be great!
If you need any other info let me know!
Thanks
You need to be more specific because some other rules in your style sheet are over-riding it.
.avia-section .arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
position: absolute;
top: 0px;
left: 50%;
}