Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
one of my website have a custom shape footer, is this possible to do purely in css? im going to apply this in a bootstrap container-fluid, so the shape should stretch to the container-fluid.
Thanks in advance!
FOOTER SCREENSHOT
UPDATED FOOTER
1.The Html code:
<div class="footer-outer">
<span class="footer-arrow"></span> <!-- This is for the top part of the background -->
<span class="footer-circle"></span> <!-- This is for the circle -->
<div class="footer-inner">
</div>
</div>
2.The CSS code:
body { padding: 0; margin: 0; }
.footer-outer { margin-top: 150px; height: 200px; background: #415061; position: relative; }
.footer-arrow { width: 0; height: 0; border-style: solid; border-width: 0 200px 100px 200px; border-color: transparent transparent #415061 transparent; position: absolute; top: -100px; left: 0; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle { position: absolute; left: 50%; border-radius: 50%; margin-left: -40px; top: -140px; width: 80px; height: 80px; background: #eee; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 26px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 2px solid #415061; border-left: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 23px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-inner { height: 300px; top: -100px; left: 0; right: 0; position: absolute; }
3.The jQuery code:
$(document).ready(function() {
stretchArrow();
});
$(window).resize(function(){
stretchArrow();
});
function stretchArrow(){
_width = Math.floor($(window).width() / 2);
$('.footer-arrow').css('border-width', '0 ' + _width + 'px 100px ' + _width + 'px');
}
4.If you want the arrow to be pointing down:
Change this CSS:
.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 26px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 2px solid #415061; border-left: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 23px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
With this one:
.footer-circle:before { content: ''; width: 26px; height: 26px; margin-left: -15px; position: absolute; top: 28px; left: 50%; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-bottom: 2px solid #415061; border-right: 2px solid #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
.footer-circle:after { content: ''; width: 2px; height: 40px; margin-left: -2px; position: absolute; top: 20px; left: 50%; background: #415061; font-size: 0; line-height: 0; text-indent: -4000px; }
Here is a working example: https://jsfiddle.net/874zxr6h/
And a working example for the arrow pointing down: https://jsfiddle.net/874zxr6h/1/
Related
I have before like below and I want rotate just background not label.
How I can do it ?
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div::before {
content: 'lable';
position: absolute;
left: -5px;
top: -33px;
background: red;
color: white;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
width: 22px;
height: 22px;
}
<div></div>
You can add :after with div and add content
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div:after {
content: 'Lable';
font-size: 11px;
position: absolute;
left: -5px;
top: -29px;
color: #fff;
}
div::before {
content: '';
position: absolute;
left: -5px;
top: -33px;
background: red;
color: white;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
width: 22px;
height: 22px;
}
<div></div>
transform: rotate (45deg);
Will rotate the complete element, including content and background.
If you want to rotate only the background then you need to keep the background separate or you can add your label in actual element instead of pseudo-element.
You can put the text into an after pseudo element which is not rotated.
div {
width: 50px;
height: 5px;
position: relative;
background: #ff756b;
margin-top: 55px;
}
div::before,
div::after {
position: absolute;
left: -5px;
top: -33px;
width: 22px;
height: 22px;
}
div::before {
content: '';
background: red;
border-radius: 20px 20px 3px 20px;
transform: rotate(45deg);
}
div::after {
content: 'lable';
color: white;
}
<div></div>
However, be aware of accessibility issues. That text may not get read out by a screen reader and if it is important for the user to know it is there is may be better to put the text in a label element actually within the HTML. You can still style it the same way so it is within the red 'bubble'.
.seven_number {
position: absolute;
right: 147px;
top: 25px;
width: 14px;
}
.seven_number:after {
content: "";
height: 5px;
width: 20px;
position: absolute;
background: #c6c6c6;
top: 0px;
left: -2px;
}
.seven_number:before {
content: "";
height: 27px;
width: 5px;
position: absolute;
background: #c6c6c6;
top: 0px;
right: 0px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
<div class="seven_number"></div>
This code is to draw a 7 with css like this https://i.stack.imgur.com/QVBXi.png
Can anyone help me draw an 8 like that please?
You can use this style as example:
.eight_number {
position: absolute;
right: 187px;
top: 25px;
width: 14px;
}
.eight_number:after {
content: "";
height: 6px;
width: 6px;
position: absolute;
top: 0px;
border-radius: 50%;
background-color:#fff;
border:4px solid #c6c6c6;
}
.eight_number:before {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: 10px;
left:-2px;
border-radius: 50%;
background-color:#fff;
border:4px solid #c6c6c6;
}
<div class="eight_number"></div>
See in playground: https://jsfiddle.net/denisstukalov/egv64dk7/16/#&togetherjs=ivslT1OqpI
I m trying to design a both and ribbon shape button on hover should show horizontal line and icon on both ends.
https://imgur.com/a/iYvJUzJ
.right-left-flag {
position: relative;
background: black;
padding: 22.1px 40px;
color: #fff;
text-transform: uppercase;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
Read More
Hope this will help you get some idea about how to do.
You can add any font icon to the after and before elements of the span inside the content.
.right-left-flag {
position: relative;
background: black;
padding: 22px 40px;
color: #fff;
text-transform: uppercase;
top: 30px;
left: 30px;
display: inline-flex;
}
.right-left-flag:before,
.right-left-flag:after {
border-color: #000 transparent;
top: 0;
}
.right-left-flag:before,
.right-left-flag:after {
border-style: solid;
height: 0;
width: 0;
display: block;
content: "";
position: absolute;
}
.right-left-flag:before {
left: -19.5px;
border-width: 33px 0 28.5px 20px;
}
.right-left-flag:after {
right: -19.5px;
border-width: 33px 20px 28.5px 0;
}
.right-left-flag:hover>span {
opacity: 1
}
.right-left-flag>span {
opacity: 0;
position: absolute;
left: 5px;
right: 5px;
top: 50%;
transform: translateY(-50%);
height: 1px;
background: #fff;
transition: all .2s;
}
.right-left-flag>span:before {
content: ':)';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.right-left-flag>span:after {
content: ':)';
position: absolute;
left: auto;
right: 0;
top: 50%;
transform: translateY(-50%);
}
Read More<span></span>
I have the following html:
<div class="container">
<span class="word-container" >
<span tooltip-def="To sign or give formal approval to.">
<span class="define-word highlight-word">ratifying</span>
</span>
</span>
</div>
CSS:
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 50%;
position: absolute;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The tooltip is cut off on the left side. I tried overflow: visible and higher z-index on .word-container [tooltip-def]:after, but none of the working.
Here is the jsfiddle demo: https://jsfiddle.net/mddc/5dtwr6zc/10/
How can I make minimal CSS changes to make the tooltip visible? Move to the right side when the left side touches the browser edge?
you are going great you only need to change the css. below is the css code apply and check.
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 10%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 20%;
position: relative;
transform: translateX(-50%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
I've made the changes which can be viewed in the fiddle below
https://jsfiddle.net/5dtwr6zc/14/
.test{
overflow: visible;
}
.container {
margin-top: 100px;
}
.word-container [tooltip-def] {
display: inline-block;
position: relative;
}
.word-container [tooltip-def]:before {
left: 50%;
position: absolute;
transform: translateX(-50%);
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 4px 6px 0 6px;
content: "";
display: none;
top: -6px;
z-index: 99;
}
.word-container [tooltip-def]:after {
left: 150%;
position: absolute;
transform: translateX(-47%);
content: attr(tooltip-def);
background: #323232;
border-radius: 5px;
color: #fff;
display: none;
font-family: open sans;
font-size: 12px;
height: auto;
min-width: 250px;
padding: 5px;
text-align: center;
top: -6px;
transform: translateX(-50%) translateY(-100%);
width: auto;
z-index: 99;
}
.word-container [tooltip-def]:hover:after,
.word-container [tooltip-def]:hover:before {
display: inline-block;
}
The problem was the positioning of the after psuedo element. But I would strongly suggest to make the positioning dynamic as per the context using JavaScript
I'm trying to cross vertically the rotated square with a line created using pseudo-element.
.marker{
display: block;
width: 16px;
height: 16px;
border: solid 2px #896f56;
transform: rotate(45deg);
}
.marker:before{
content: "";
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
transform:rotate(-45deg);
margin-left: 19px;
}
https://jsfiddle.net/npvfu3ff/
But the rotate rule is affecting the pseudo element making it difficult to position.
Here is an image of what I need:
Changed the way to do it, so that it will center automatically
.marker{
display: block;
width: 16px;
height: 16px;
border: solid 2px #896f56;
transform: rotate(45deg);
margin-top: 30px;
}
.marker:before{
content: "";
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
margin: auto;
margin-top: 50%;
transform:rotate(-45deg) translatey(-50%);
transform-origin: top center;
}
<div class="marker"></div>
I detached marker line from rotation by using :before and :after for square and line, so they don't affect each other.
https://jsfiddle.net/wmqhd72u/
.maker2 {
position: relative;
}
.maker2:hover:before {
transform: rotate(405deg);
}
.maker2:before,
.maker2:after {
position: absolute;
}
.maker2:before {
display: block;
content: "";
width: 16px;
height: 16px;
border: solid 2px #896f56;
top: 0;
left: 0;
transform: rotate(45deg);
transition: all 2s;
}
.maker2:after {
content: "";
position: relative;
top: -8px;
left: -8px;
width: 2px;
height: 40px;
background-color: #896f56;
display: block;
margin-left: 19px;
top: 8px;
left: -10px;
}