I'm just going to create a box on the
edge has an arrow. I have quite often tried but unfortunately relevant solution.
I naturally inquired on the Internet and on the website, but unfortunately without success.
So it should look after:
the arrow should have the same border like the box and the same backgroundcolor
So it looks now
.arrow-up {
width: 10px;
height: 10px;
margin-top: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid gray;
}
#log2 {
height: 250px;
width: 250px;
background: white;
border: 1px groove rgba(0, 0, 0, .35);
position: relative;
display: block;
margin-top: 54px;
float: left;
left: 29.965%;
z-index: 2;
border-radius: 3.5px;
}
FIDDLE
I'm sorry for my english
Here's updated fiddle: FIDDLE.
You can try with this CSS:
#log2 {
border: 1px solid #ccc;
border-radius: 3px;
width: 300px;
padding: 10px;
margin: 15px auto 0;
position: relative;
background: #fff;
}
#log2:after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-color: #ccc;
border-width: 1px 0 0 1px;
width: 15px;
height: 15px;
top: -9px;
right: 19px;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
However, this includes transform property which is a new feature and might not work in every browser.
Other solutions are fine but they won't let you add border to this little triangle. You pick the one that suits you.
EDIT:
Yet another fiddle: http://jsfiddle.net/dAdry/22/.
I also figured out how to do this without transform. You put two triangles, one grey and one white a little bit smaller.
#log2 {
border: 1px solid #ccc;
border-radius: 3px;
width: 300px;
padding: 10px;
margin: 15px auto 0;
position: relative;
background: #fff;
}
#log2::before, #log2::after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-width: 0 10px 10px 10px;
right: 19px;
}
#log2::before {
border-color: #ccc transparent;
top: -10px;
right: 19px;
}
#log2::after {
content: "";
display: block;
position: absolute;
border-style: solid;
border-color: #fff transparent;
border-width: 0 10px 10px 10px;
top: -9px;
}
Try it out and let me know if it suits you.
Create your triangle using :before
http://jsfiddle.net/dAdry/9/
#log2:before {
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 7.5px 8px 7.5px;
border-color: transparent transparent white transparent;
position: absolute;
display:block;
top: -8px;
}
.arrow-up {
width: 0;
height: 0;
margin-top: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid gray;
}
fiddle
http://jsfiddle.net/dAdry/27/
This creates a border.
The CSS
.arrow-up {
width: 0px;
height: 0px;
margin:0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid gray;
}
.arrow-inner {
width:0;
height:0;
margin:1px 0 0 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
}
#log2 {
height: 250px;
width: 250px;
background: white;
border: 1px groove rgba(0, 0, 0, .35);
position: relative;
display: block ;
margin-top: 54px;
float: left;
left: 29.965%;
border-radius: 3.5px;
}
And the HTML...
<ul id="log2" style="display: inline;">
<span class="arrow-up" style="top: -9px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;" ></span>
<span class="arrow-inner" style="top: -9px; left: 70.0%; position: absolute; background-size: 100%; z-index: 999;"></span>
<br/>How are u?<br/>Whats the matter? :D
</ul>
Related
this is the picture which i am facing] i am writing this code.
i already use z-index in both divs but it is not woring here. i think problem in my message code. can you identify it. i am weak in CSS.
Dropdown Menu
position: absolute;
right: 0px;
background-color: white;
// box-shadow: 0px 0px 6px 6px white;
outline: none;
opacity: 0;
border: 1px solid #00000008;
z-index: -1;
max-height: 0;
min-width: 150px;
}
.dropdown-container:focus {
outline: none;
}
.dropdown-container:focus .dropdownnew {
opacity: 1;
z-index: 5;
max-height: 100vh;
}
Message code
.message-orange {
position: relative;
margin-bottom: 10px;
margin-left: -webkit-calc(100% - 400px);
margin-left: calc(100% - 400px);
padding: 16px;
background-color: #ffffff;
width: 400px;
height: auto;
text-align: left;
font-size: 0.75rem;
border: 1px solid #ffffff;
border-radius: 10px;
}
Could some one help me with one question:
I have 2 divs.
The first one is being used to rotate the second div.
the second one to rotate it self to the regular rotation.
I click on first div --> it rotates the second DIV.
I click on the second div, it's rotating it self to the previous/regular position.
#_4220w_86 {
height: 20px;
width: 20px;
background-color: #171717;
border-radius: 50%;
margin-top: -43px;
margin-left: 124px;
cursor: pointer;
}
#_4220w {
width: 0;
height: 0;
border-top: 3px solid transparent;
border-left: 6px solid #ec820f;
border-bottom: 3px solid transparent;
margin-left: 132px;
margin-top: -13px;
cursor: pointer;
}
#_4220w_2 {
position: absolute;
right: 20px;
height: 28px;
width: 28px;
background-color: #0f0f0f;
border-radius: 100%;
cursor: pointer;
top: 45px;
}
._4220w_2 {
width: 0;
height: 0;
border-style: solid;
border-width: 5.5px 0 5.5px 10px;
border-color: transparent transparent transparent #ec820f;
margin-left: 10px;
margin-top: 8px;
}
<!--Here is the first DIV:-->
<div id="_4220w_86">
</div>
<div id="_4220w">
</div>
<!--Here is the second DIV:-->
<a href="#" id="_4220w_2">
<div class="_4220w_2"></div>
</a>
try to use this code
http://jsfiddle.net/24yboknc/1/
html
<div id="rotate">rotate the other</div>
<div id="rotate2"> back to normal</div>
css
#rotate,#rotate2{
width: 100px;
height: 100px;
background: red;
margin: 50px;
text-align: center
}
#rotate2.rotated{
transform: rotate(90deg);
}
js
$('#rotate').click(function(){
if(!$('#rotate2').hasClass('rotated')){
$('#rotate2').toggleClass('rotated');
}
});
$('#rotate2').click(function(){
if($('#rotate2').hasClass('rotated')){
$('#rotate2').removeClass('rotated');
}
});
inspired to jQuery rotate div onclick +/-90
I've created a button that looks like a document with a label below it by moving the button's text outside of its self with position absolute:
$('.item-title').hover(function() {
$(this).parent().addClass('hover');
}, function() {
$(this).parent().removeClass('hover');
});
$('.item-title').on('click', function() {
alert('test this')
});
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="item-button"><span class="item-title">File Title</span></button>
However I can't seem to get the label that's now floating outside the control to react at all to any mouse events. How can I get it to be clickable and pass its hover state back to its parent?
Edit: Seems this is a browser specific issue to firefox, works correctly in Chrome and IE.
Have you tried to write "e.stoppropagation()" in the click event of the label. this will stop the label to push events to its parents.
Update: I tried binding a click event to your label and it works without an issue,
$('.item-title').on('click',function(){
alert('test this')});
Edit your Css code :
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
z-index : 888;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
There are two types of help text container I have. One is in <div> other is in <span>
I wrote a css both in one style. It's working good but those <div> and <spans> includes an arrow styled child <div> and <span>. I tried to combine that .arrow styles but it failed in practice. Is there a way combine those same styles?
HTML example for <div>:
<div class="helptext" id="{{ id_for_label }}">
<div class="arrow"></div> Helptext is in here
</div>
HTML example for <span>:
<span class="helptext" id="{{ id_for_label }}">
<span class="arrow"></span> Helptext is in here
</span>
CSS for both:
div[class="helptext"],span[class="helptext"] {
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
CSS .arrow example for <div>:
div[class="helptext"] .arrow {display: block; position: absolute; border: 10px solid transparent;
border-bottom-color: #3c578c; top: -20px; right: 10px;}
CSS .arrow example for <span>:
span[class="helptext"] .arrow {display: block; position: absolute; border: 10px solid transparent;
border-bottom-color: #3c578c; top: -20px; right: 10px;}
I can't combine last two css.
You are missing .arrow in both selectors for your css
Use this
div[class="helptext"] .arrow,span[class="helptext"] .arrow{
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
I think you can .helptext .arrow as selector, if you don't have another element with classname helptext.
You should use below code:
.helptext {
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
.helptext .arrow {
display: block;
position: absolute;
border: 10px solid transparent;
border-bottom-color: #3c578c;
top: -20px;
right: 10px;
}
How to make this (http://jsbin.com/uxayid/3/) work in firefox too?
This is the css of the triangles:
#c table tr td {
height: 295px;
width: 208px;
background-color: white;
border: 1px solid black;
position: relative;
text-align: center;
}
.tr-topright {
border-left-width: 42px;
border-top-width: 42px;
border-left-color: white;
border-left-style: solid;
border-top-color: #BBBBBB;
border-top-style: solid;
box-shadow: -3px 3px 6px 0 lightGrey;
height: 0;
position: absolute;
right: 0;
top: 0;
width: 0;
}
The first one is the expected result.
Just add:
display: block;
float: left;
to the
#c table tr td
rule
and it should work fine.