I'm currently trying to write words over a triangle-shaped div that I created using CSS.
Here:
.triangle-topright {
width: 0;
height: 0;
border-top: 100px solid gray;
border-left: 100px solid transparent;
}
<div class="triangle-topright">view</div>
As you can see, view is misplaced as I want it to be inside the shape. I also want it to rotate so It's nice for the eye. I know that text rotation goes something like this (example):
-moz-transform: rotate(-90deg);
Can I achieve the goal using CSS or do I need to add some JS?
Thanks a lot!
Use pseudo elements
DEMO - 1
.triangle-topright {
width: 100px;
height: 100px;
transform: rotateZ(45deg);
margin: 20px;
position: relative;
z-index: 1;
text-align: center;
line-height: 64px;
}
.triangle-topright:before {
content: '';
z-index: -1;
position: absolute;
top:0;
left: 0;
width: 0;
height: 0;
transform: rotateZ(-45deg);
border-right: 100px solid gray;
border-bottom: 100px solid transparent;
}
<div class="triangle-topright">view</div>
DEMO - 2
.triangle-topright {
width: 100px;
height: 100px;
margin: 20px;
position: relative;
z-index: 1;
text-align: center
}
.triangle-topright:before {
content: '';
z-index: -1;
position: absolute;
top:0;
left: 0;
width: 0;
height: 0;
border-top: 100px solid gray;
border-left: 100px solid transparent;
}
<div class="triangle-topright">view</div>
DEMO - 3
.triangle-topright {
width: 100px;
height: 100px;
transform: rotateZ(90deg);
margin: 20px;
position: relative;
z-index: 1;
text-align: center
}
.triangle-topright:before {
content: '';
z-index: -1;
position: absolute;
top:0;
left: 0;
width: 0;
height: 0;
border-top: 100px solid gray;
border-left: 100px solid transparent;
}
<div class="triangle-topright">view</div>
DEMO - 4
.triangle-topright {
width: 100px;
height: 100px;
transform: rotateZ(90deg);
margin: 20px;
position: relative;
z-index: 1;
text-align: center
}
.triangle-topright:before {
content: '';
z-index: -1;
position: absolute;
top:0;
left: 0;
width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;
}
<div class="triangle-topright">view</div>
Some of the answers above achieve the same already. Here is my JSfiddle you can play around with.
http://jsfiddle.net/tmtg1oc8/
.container {
position: relative;
}
.triangle {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 100px solid gray;
border-left: 100px solid transparent;
z-index: -1;
}
.content {
padding: 40px;
}
And the html
<div class="container">
<div class="triangle"></div>
<div class="content">hello</div>
</div>
Here's an example of doing it with just CSS.
HTML
<section class="page_block">
<div class="row">
<div class="col-md-1">
<div id="header">
<h1 class="verticaltext">
Vert Text
</h1>
</div>
</div>
<div class="col-md-11">
<p>Column Somethin?</p>
</div>
</div>
</section>
CSS
.page_block {
margin:0px;
padding:10px;
}
#header {
position: relative;
}
.verticaltext {
transform: rotate(45deg);
transform-origin: right, top;
-ms-transform: rotate(45deg);
-ms-transform-origin:right, top;
-webkit-transform: rotate(45deg);
-webkit-transform-origin:right, top;
position: absolute;
color: #ed217c;
}
Related
I'm trying to create the following structure on click of each button i want to show small triangle representation to the center of button on the top of container
but i has no idea to achieve this. it would be helpful for suggestions and help
.arrow_box {
position: relative;
border:2px solid green;
height:200px;
}
.arrow_box:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: black;
border-width: 15px;
margin-left: -15px;
}
<div>
<button>left</button>
<button>center</button>
<button>right</button>
<div class="arrow_box"></div>
</div>
Here I hacked some garbage together for you.
button {
position: relative;
}
button:focus:before{
border:2px solid green;
height:200px;
width: 300px;
content: "";
position: absolute;
top: 200%;
left: -20%;
border:2px solid green;
}
button:focus:after {
bottom: -100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: black;
border-width: 15px;
margin-left: -15px;
}
<div>
<button>left</button>
<button>center</button>
<button>right</button>
<div class="arrow_box"></div>
</div>
I am trying to achieve this circular navigation menu
example : http://www.jerseywater.je/water/index.html#page_0/
I have done almost all of it!
the problem now is how to change a border of a css shape with mouseover function
edit:
"that is when i hover some other shape the border color will change in the main circle"
#circle {
width: 120px;
height: 120px;
border-radius: 70px;
box-shadow: 6px 6px 5px #888888;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border: 4px solid #73AD21;
position:absolute;
top:50%;
left:50%;
margin-top:-60px;
margin-left:-50px;
background: transparent;
}
<div id="circle">
<p id="content">
Blah Blah
</p>
</div>
$(document).ready(function(){
$( "#circle" )
.mouseenter(function() {
$( this ).css("border","black solid 1px");
})
.mouseleave(function() {
$( this ).css("border","red solid 1px");
});
});
Something like this: jsFiddle ?
This is an example of what you may want to achieve:
http://codepen.io/TunderScripts/pen/ZBBdBM
html
<div class="container">
<div class="main_circle"> Look</div>
<div class="menu_items item1">Menu Item 1</div>
<div class="menu_items item2">Menu Item 2</div>
<div class="menu_items item3">Menu Item 3</div>
<div class="menu_items item4">Menu Item 4</div>
</div>
css
* {
box-sizing: border-box;
}
.container {
width: 600px;
height: 600px;
border: 2px solid blue;
position: relative;
margin: 40px auto;
}
.main_circle {
position: absolute;
top: 50%;
display: block;
left: 50%;
width: 80px;
height: 80px;
border-radius: 100%;
border: 2px solid red;
padding: 25px 20px;
transform: translate( -50%, -50%) rotate(0deg);
background: blue;
z-index: 100;
}
.main_circle:before {
content: "";
height: 25px;
width: 30px;
display: block;
border: 2px solid red;
border-radius: 40px;
position: absolute;
float: left;
top: -10px;
z-index: 5;
}
.menu_items {
position: absolute;
height: 80px;
width: 80px;
border-radius: 100%;
border: 2px solid green;
padding: 17px;
display: block;
}
.item1 {
top: 20px;
left: 250px;
}
.item2 {
top: 260px;
right: 20px;
}
.item3 {
bottom: 20px;
left: 250px;
}
.item4 {
top: 260px;
left: 20px;
}
and js
var menuItems = $('.menu_items').length;
var step = 360 / menuItems;
$('.menu_items').on('mouseover' , function(){
var classList = $(this).attr('class');
var identifier = classList.split(' ')[1].substr(4,1);
var calc = (parseInt(identifier) - 1) * step;
var transform = 'translate(-50%, -50%) rotate(' + calc + 'deg)';
console.log(transform);
$('.main_circle').css('transform', transform);
});
if you increase the number of menu-items, reposition them with css and the js will still work. Name the classes as I did with item#(number) and it should work. Have fun.
#circle:hover {
border-color: pink;
}
In the css use :hover eg:
#circle:hover {
border: 10px solid black;
}
More details can be found here: http://www.w3schools.com/cssref/sel_hover.asp
I am in need of assistance creating something like the image above either in CSS / jQuery / SVG / Canvas
Each triangle will contain an image that needs to be cropped to fit the triangle and everything needs to be responsive.
I managed in doing this via CSS border but for my surprise I couldn't add an image to it.
Any kind of tips or info is greatly appreciated.
Example resulted via CSS:
<div class="middle_section" style="height: 900px;">
<div class="one_forth triangleMask for_1"></div>
<div class="one_forth triangleMask for_2"></div>
<div class="one_forth triangleMask for_3"></div>
<div class="one_forth triangleMask for_4"></div>
</div>
.middle_section .for_3,
.middle_section .for_1{
width: 100%;
height: 50%;
overflow: hidden;
}
.middle_section .for_2,
.middle_section .for_4{
width: 50%;
height: 100%;
overflow: hidden;
}
.middle_section .for_1:after {
width: 0;
height: 0;
border-style: solid;
border-width: 440px 808px 0px 808px;
border-color: #ff0000 transparent transparent transparent;
content: '';
position: absolute;
top:0;
left:10px;
}
.middle_section .for_2:after {
width: 0;
height: 0;
border-top: 440px solid transparent;
border-bottom: 440px solid transparent;
border-left: 808px solid lime;
content: '';
position: absolute;
top:10px;
}
.middle_section .for_3:after {
width: 0;
height: 0;
border-left: 808px solid transparent;
border-right: 808px solid transparent;
border-bottom: 440px solid #4679BD;
content: '';
position: absolute;
bottom:0;
left:10px;
}
.middle_section .for_4:after {
width: 0;
height: 0;
border-top: 440px solid transparent;
border-bottom: 440px solid transparent;
border-right: 808px solid pink;
content: '';
position: absolute;
top:10px;
right:0;
}
I made an example with CSS transform rotate:
.wrapper {
width:284px;
height:281px;
overflow: hidden;
position: relative;
}
.top {
transform: rotate(45deg);
position: absolute;
top:-100px;
left: 40px;
}
.bottom {
transform: rotate(45deg);
position: absolute;
bottom: -105px;
left: 40px;
}
.left {
transform: rotate(45deg);
position: absolute;
left: -102px;
top: 41px;
}
.right {
transform: rotate(45deg);
position: absolute;
right: -98px;
top: 41px;
}
<div class="wrapper">
<div class="top">
<img src="http://lorempixel.com/200/200/sports/1"/>
</div>
<div class="bottom">
<img src="http://lorempixel.com/200/200/sports/2"/>
</div>
<div class="left">
<img src="http://lorempixel.com/200/200/sports/3"/>
</div>
<div class="right">
<img src="http://lorempixel.com/200/200/sports/5"/>
</div>
</div>
I want to give a border on all sides to a one sided-skewed box, but I am unable to do so.
The css code written for this is
.block{
height: 400px;
width: 100%;
position: relative;
background: yellow;
height: 100px;
width: 100px;
border-top: 2px solid teal;
border-bottom: 2px solid teal;
border-left: 2px solid teal;
}
.block::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
top:0;
right:0;
transform-origin: right bottom ;
transform: skewX(-20deg);
border-right: 2px solid teal;
}
DEMO
Does anyone have a solution for this problem?
All you need to do is play around a bit more with the borders and positioning of the pseudo element. Something like this:
.block {
position: relative;
background: black;
height: 100px;
width: 100px;
border: 2px solid teal;
border-right: none;
}
.block::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
top: -2px;
right: -2px;
transform-origin: right bottom;
transform: skewX(-20deg);
border: 2px solid teal;
}
<div class="block"></div>
Basically, I want to be able to change the color of #bar when hovering over the lower third of #content, represented by #trigger (green rectangle), while still being able to fire the mousedown event on #content, but with pointer-events:none; can't do both without some JavaScript help.
content.addEventListener("mousedown", function() { //For click&drag
content.classList.toggle("red");
content.classList.toggle("gray");
});
#main {
background-color: black;
position: relative;
text-align: center;
}
#content {
width: 400px;
height: 300px;
margin: auto;
}
#trigger {
pointer-events: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
border: 2px green solid;
}
#bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 36px;
background-color: purple;
transition: background-color 0.3s ease;
}
#trigger:hover #bar {
/*Won't fire because of pointer-events:none*/
background-color: blue;
}
.red {
border: 2px red solid;
}
.gray {
border: 2px gray solid;
}
<div id="main">
<div id="content" class="red"></div>
<div id="trigger">
<div id="bar"></div>
</div>
</div>
Is there a way to achieve such thing with CSS or am I stuck with JavaScript?
JavaScript solution (#trigger is there just for show):
content.addEventListener("mousedown", function() { //For click&drag
content.classList.toggle("red");
content.classList.toggle("gray");
});
main.addEventListener("mousemove", function(event) {
var mainBounds = main.getBoundingClientRect();
if (event.pageY > (mainBounds.height / 10) * 7) bar.classList.add("blue");
else bar.classList.remove("blue");
});
#main {
background-color: black;
position: relative;
text-align: center;
color:white;
}
#content {
width: 400px;
height: 300px;
margin: auto;
}
#trigger {
pointer-events: none;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
border: 2px green solid;
}
#bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 36px;
}
.red {
border: 2px red solid;
}
.gray {
border: 2px gray solid;
}
.purple {
background-color: purple;
transition: background-color 0.3s ease;
}
.blue {
background-color: blue;
}
<div id="main">
<div id="content" class="red"></div>
<div id="trigger">
<div id="bar" class="purple"></div>
</div>
</div>