Diamond menu items using CSS and SVG
This is how I would do it to keep the boundaries of the shapes based on Responsive grid of diamonds (no JS or svg needed):
DEMO
.wrap{ width:50%; margin-left:13%; transform-origin:60% 0; transform: rotate(-45deg);}.wrap > a{ float:left; width:19%; padding-bottom:19%; margin:0.5%; background:teal;}.wrap > a:hover{ background:gold;}.wrap > a:nth-child(4){ clear:left; margin-left:20.5%;}.wrap > a:nth-child(7){ clear:left; margin-left:60.5%;}<div class="wrap"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a></div>Responsive diamond grid
The responsive grid of diamons:
I don't think you have the right aproach to achieve a regular responsive diamond grid layout. It would be much simpler to:
- create a responsive grid of squares (3x3 or whatever grid you feel like)
- then rotate the grid 45 degrees.
That way you won't have to fiddle with borders, pseudo elements (:after, :before) and positioning each diamond.
Here is a responsive example
It uses percentage width and padding-bottom to keep the diamonds responsive and transform:rotate(45deg); to rotate te whole grid and make it look like a diamond grid:
body{background:#000;}#big_diamond { width: 50%; margin:15% auto; overflow:hidden; transform: rotate(45deg);}.diamond { position: relative; float: left; width: 31.33%; padding-bottom: 31.33%; margin: 1%; background: #fff; transition:background-color .4s;}.diamond a { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}#red{background-color: #AA1C08;}.diamond:hover, #red:hover{background-color:darkorange;}<div id="big_diamond"> <div class="diamond"><a href="https://twitter.com/"></a></div> <div class="diamond"><a href="https://twitter.com/"></a></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond" id="red"><a href="https://twitter.com/"></a></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div></div>How do I get these hover effects but with diamonds instead of circles
There are many demos in the link you posted. I just picked the first demo as an example. In fact all the demos there style the element as circles, which is simpler than shaping elements as diamonds. As I said before, the most important thing is how to render the diamond shape, it should have border and inner content (such as image background ...). That requirement makes it become more complicated than just a solid diamond. After shaping the element as diamond, you just need to apply the transform scale (from 0 in normal state to 1 in hover state). Of course we need many parts in the diamond menu item so we need some HTML elements to render it (1 element together with its pseudo-elements won't be able to render complicated shapes with rich interaction and effects ...). Here is the demo code, note that I just used transform property and use prefix-free library, you can add more prefixed versions of transform (such as -webkit-transform, -moz-transform, ...) if you don't want to use prefix-free library:
HTML:
<div class='menu-item'>
<div class='diamond chrome'></div>
<div class='content'>
<div class='diamond clipper'>
<div class='inner-content'>
Diamond menu item
</div>
</div>
</div>
</div>
CSS:
.menu-item {
width:200px;
height:200px;
position:relative;
transform: translateY(100px)
}
/* render diamond shape */
.diamond {
width:100%;
height:100%;
position:absolute;
left:0;top:0;
transform:rotate3d(0,0,1,45deg) skew(15deg,15deg);
}
/* the outside chrome which has the translucent white border
and the background image */
.diamond.chrome {
overflow:hidden;
}
/* render the background */
.diamond.chrome:before {
content:'';
position:absolute;
background:url(http://placekitten.com/200/200);
background-size:100% 100%;
width:200%;
height:200%;
left:50%;top:50%;
transform: translate(-50%,-50%) skew(-15deg,-15deg) rotate3d(0,0,1,-45deg);
z-index:-1;
}
/* render the translucent white border */
.diamond.chrome:after {
content:'';
position:absolute;
left:0;top:0;
width:100%;
height:100%;
box-shadow:0 0 0 20px rgba(255,255,255,.5) inset;
transition:all 0.4s ease-in-out;
}
/* animate the translucent border when hovering the menu item */
.menu-item:hover .chrome:after {
box-shadow:0 0 0 0px rgba(255,255,255,.5) inset;
}
/* animate the inner content when hovering the menu item */
.menu-item:hover .content {
transform:scale(1);
opacity:0.8;
}
/* the content which should be scaled from 0 up to 1
to show up on hovering */
.menu-item .content {
color:white;
opacity:0;
font-size:20px;
transition:all 0.4s ease-in-out;
transform:scale(0);
position:absolute;
width:100%;
height:100%;
}
/* the clipper used to clip the inner content by the diamond shape */
.menu-item .clipper {
overflow:hidden;
}
/* the inner content which contains text and other elements for interaction */
.menu-item .inner-content {
background:teal;
position:absolute;
text-align:center;
width:200%;
height:200%;
left:50%;top:50%;
transform: translate(-50%,-50%) skew(-15deg,-15deg) rotate3d(0,0,1,-45deg);
}
/* this is used to align the text vertically */
.menu-item .inner-content:before {
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
JsBin Demo
bootstrap different shaped images
I found something that actualy works!! and it's responsive! :D
.poligono, .poligono div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 250px;
height: 250px;
}
.poligono {
transform: rotate(45deg) translateY(10px);
}
.poligono .los1 {
width: 355px;
height: 355px;
transform: rotate(-45deg) translateY(-74px);
}
.poligono .los1 img {
width: 100%;
height: auto;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.poligono:hover img {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<div id="projects" class="projects">
<div class="container">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<h2>Projects</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
<p class="descricao">Cenas maradas acontecem</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-4">
<div class="poligono img-responsive">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono img-responsive">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
</div>
<div class="row margin-bottom">
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="poligono">
<div class="los1">
<a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
</div>
</div>
</div>
</div>
</div>
</div>
Restrict a click to a specific shape
CSS solution
You may maintain the boundaries of the diamond shape and make only the part with the image clickable by using css transform properties. The point is to use the skew property so that the link actualy has a diamond shape and therefore isn't clickable outside this shape (see following demo and screenshot). Then, you need to "counter transform" the content so it isn't skewed.
DEMO
screenshot :
Relevant CSS :
a{
width: 216px;
height: 250px;
overflow:hidden;
display:inline-block;
background:red;
-webkit-backface-visibility:hidden; /* to reduce pixelisation on borders in chrome */
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform: translate(55%,0) rotate(30deg) skewY(30deg);
-ms-transform: translate(55%,0) rotate(30deg) skewY(30deg);
transform: translate(55%,0) rotate(30deg) skewY(30deg);
}
.post-wrapper {
width: 250px;
height: 432px;
background: url(http://lorempixel.com/output/people-h-c-250-432-8.jpg) center center;
background-size: cover;
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform: skewY(-30deg) rotate(-30deg) translate(-50%,0);
-ms-transform: skewY(-30deg) rotate(-30deg) translate(-50%,0);
transform: skewY(-30deg) rotate(-30deg) translate(-50%,0);
}
What characters can be used for up/down triangle (arrow without stem) for display in HTML?
Unicode arrows heads:
- ▲ - U+25B2 BLACK UP-POINTING TRIANGLE
- ▼ - U+25BC BLACK DOWN-POINTING TRIANGLE
- ▴ - U+25B4 SMALL BLACK UP-POINTING TRIANGLE
- ▾ - U+25BE SMALL BLACK DOWN-POINTING TRIANGLE
For ▲ and ▼ use ▲ and ▼ respectively if you cannot include Unicode characters directly (use UTF-8!).
Note that the font support for the smaller versions is not as good. Better to use the large versions in smaller font.
More Unicode arrows are at:
- http://en.wikipedia.org/wiki/Arrow_%28symbol%29#Arrows_in_Unicode
- http://en.wikipedia.org/wiki/Geometric_Shapes
Lastly, these arrows are not ASCII, including ↑ and ↓: they are Unicode.
Draw Triangle Clipping Shape using CSS
You could use CSS transforms to rotate and skew an element into a diamond, and then reverse those transforms for the child elements. If you have overflow: hidden; on the diamond and position the diamond in a wrapper that also has overflow: hidden;, you could produce a clipping triangle with content using just CSS.
Working Example (Codepen):
/* Clip the bottom half of the diamond. */.triangle-wrap { width: 400px; height: 400px; position: relative; overflow: hidden;}/* Rotate and skew to create a diamond. */.triangle { background: grey; position: absolute; bottom: -50%; width: 100%; height: 100%; overflow: hidden; -webkit-transform: rotate(45deg) skew(20deg, 20deg); -moz-transform: rotate(45deg) skew(20deg, 20deg); -ms-transform: rotate(45deg) skew(20deg, 20deg); transform: rotate(45deg) skew(20deg, 20deg);}/* Reset the skew and rotation. */.triangle-reset { width: 100%; height: 100%; position: relative; -webkit-transform: skew(-20deg, -20deg) rotate(-45deg); -moz-transform: skew(-20deg, -20deg) rotate(-45deg); -ms-transform: skew(-20deg, -20deg) rotate(-45deg); transform: skew(-20deg, -20deg) rotate(-45deg);}/* Create a content wrapper. */.triangle-content { background: url('http://placehold.it/400x400') no-repeat; background-position: center center; background-size: cover; position: relative; width: 120%; height: 120%; left: -10%; bottom: 65%;}
/* Visual aid. */html { min-height: 100%; background: linear-gradient(to bottom, #336666 0%,#663366 100%);}<div class="triangle-wrap"> <div class="triangle"> <div class="triangle-reset"> <div class="triangle-content"> </div> </div> </div></div>Half hexagon shape with one element
Using Border Method:
You can do it using the below CSS. The shape is obtained by placing a triangle shape at the bottom of the rectangle using :after pseudo element. The triangular part is achieved using border method.
.pentagon { height: 50px; width: 78px; background: #3a93d0; position: relative;}.pentagon:after { border: 39px solid #3a93d0; border-top-width: 15px; border-color: #3a93d0 transparent transparent transparent; position: absolute; top: 50px; content: '';}<div class="pentagon"></div>Related Topics
CSS Sprite Techniques, CSS Background or Img's Clip
Should I Locally Store CSS Generated by The Google Web Fonts API
Background Color for Text (Only)
Force Last Div on a New Line with Flexbox
Replace Background in Twitter Bootstrap Navbar for Ie
Selecting Children Elements But Not Grandchildren
Svg Letter-Spacing Also Applied to Mozilla Firefox
Absolute Positioned Item in a Flex Container Still Gets Considered as Item in Ie & Firefox
Dynamic HTML Table with Fixed Header and Fixed First Column
The Fieldset's Background Color Gets Out of Border in Ie
Overriding CSS on Github Pages Using Slate Theme
Is There an Equivalent of Spriting for Svg Images in Web Pages
Sprite Height Limitation for CSS Images
Display Only The Number of Items That Will Fit, and Then Expand to Fit Snugly
Problem with Position Absolute in Ie7, Div Moves 10Px to The Right