I want to have a design where my main div(box) will be looking something like below, where i don't want my right top border to be chucked off. Can you please help me in designing the same.
You could use :after pseudo element
div {
width: 250px;
height: 150px;
border: 2px solid #677D50;
border-bottom: 20px solid #677D50;
margin: 50px;
background: white;
position: relative;
}
div:after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 70px;
height: 70px;
background: white;
border-bottom: 2px solid #677D50;
transform: rotate(46deg) translateY(-52px);
}
<div></div>
Or SVG
rect {
fill: #677D50;
}
polygon {
fill: none;
stroke: #677D50;
stroke-width: 2;
stroke-miterlimit: 10;
}
<svg x="0px" y="0px" width="400px" height="250px" viewBox="0 0 400 250">
<polygon points="378,230 24.5,230 24.5,20.5 339,20.5 378,52.5 " />
<rect x="24.5" y="203" width="353.5" height="27" />
</svg>
Related
I have a schematic as follows:
How can I use css and html to draw out such a thing?
I tried some of the ways, but it can not create the border for the triangle, I want the triangles to have borders, and I can set the border to two sides or one edge or all the edges of those triangles. .
Here is the code that I tried with the first pentagon:
<style type="text/css">
div {
position: relative;
width: 200px;
height: 150px;
background: #4275FF;
}
div:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 75px solid transparent;
border-bottom: 75px solid transparent;
border-left: 25px solid #4275FF;
right: -25px;
}
</style>
<div></div>
Another alternative
div {
position: relative;
width: 200px;
height: 150px;
background: #EEE;
border: 1px dashed #777;
position: relative;
}
div.v2 {
border-right: 0px;
}
div:after {
content: '';
z-index: -1;
transform: rotate(135deg);
background: inherit;
border: inherit;
width: 106px;
height: 106px;
top: 21px;
right: -53px;
position: absolute;
}
<div></div>
<div class="v2"></div>
I think the SVG is the best way to create the border for the triangle.
See the code, 'polyline' create a triangle. three 'line' are the border of the triangle, and you can change the color of these lines through the style-stroke-color.
<svg>
<polyline points="10,10 50,50 10,90" style="fill:#006600;stroke:#fff;" />
<line x1="10" y1="10" x2="50" y2="50" style="stroke:#ff0000;" stroke-width="2" />
<line x1="50" y1="50" x2="10" y2="90" style="stroke:#00ff00;" stroke-width="2" />
<line x1="10" y1="10" x2="10" y2="90" style="stroke:#0000ff;" stroke-width="2" />
</svg>
This is the layout I'm looking to achieve:
I've created the hexagon with this css:
.hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
display:inline-block;
margin:0.2em;
}
.hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
.hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
However, I'm looking to find out how to fill them with an image.
Here is a pen:https://codepen.io/1istbesser/pen/ddypXK
How do I put images inside the hexagon so that it covers all of it? If I use background-image on #hexagon1, the image only covers the middle part.
The problem you're going to run into is that using CSS triangles to create a hexagon actually yields square boxes with one or two borders filled in (and the rest transparent). This has two effects:
You can't easily put an image into the filled border so that it's clipped.
You can't make the hexagon - and only the hexagon - clickable: the whole set of rectangles will always be clickable, which will make your layout tricky where they overlap.
You're going to need something that can produce an actual hexagon. Inline SVG with a clip-path is a good fit - unlike clip-path in CSS, it's supported pretty much wherever SVG is. Here's an example:
<svg class="svg-graphic" width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<clipPath id="hexagonal-mask">
<polygon points="300,150 225,280 75,280 0,150 75,20 225,20" />
</clipPath>
</defs>
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png" preserveAspectRatio="xMidYMin slice"/>
</svg>
Here's a more detailed example showing clickable hexagons, and re-use of the clip path definition:
.svg-template {
position: absolute;
}
.honeycomb {
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 1200px;
height: 1200px;
border: 1px solid #DDD;
}
.honeycomb li {
margin: 0;
padding: 0;
position: absolute;
}
.honeycomb li:nth-child(1) {
top: 0;
left: 0;
}
.honeycomb li:nth-child(2) {
top: 0;
left: 290px;
}
.honeycomb li:nth-child(3) {
top: 0;
left: 580px;
}
.honeycomb li:nth-child(4) {
top: 240px;
left: 145px;
}
.honeycomb li:nth-child(5) {
top: 240px;
left: 435px;
}
.honeycomb li:nth-child(6) {
top: 240px;
left: 725px;
}
.honeycomb li a {
cursor: pointer;
}
.honeycomb li a:hover image{
opacity: 0.5;
}
<svg class="svg-template" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<clipPath id="hexagonal-mask">
<polygon points="50 0, 95 25, 95 75, 50 100, 5 75, 5 25" />
</clipPath>
</defs>
</svg>
<ul class="honeycomb">
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg width="300" height="300" viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
</ul>
You need to consider another way if you want to use image as background. You are relying on pseudo element so your hexagone is not one element and thus you cannot use background image to cover the whole area.
Here is an idea using clip-path:
* {
background-color: black;
}
section {
margin-top: 3em;
display: flex;
flex-flow: column;
align-items: center;
}
.hexagon {
width: 100px;
height: 100px;
background: url(https://lorempixel.com/100/100/) 0 0/cover no-repeat;
position: relative;
display: inline-block;
margin: -10px 0.2em;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
<section>
<div class="row">
<div class="hexagon" id="hexagon1"></div>
<div class="hexagon" id="hexagon2"></div>
<div class="hexagon" id="hexagon3"></div>
<div class="hexagon" id="hexagon4"></div>
</div>
<div class="row">
<div class="hexagon" id="hexagon5"></div>
<div class="hexagon" id="hexagon6"></div>
<div class="hexagon" id="hexagon7"></div>
<div class="hexagon" id="hexagon8"></div>
<div class="hexagon" id="hexagon9"></div>
</div>
</section>
What you could do is draw an SVG and than put the image as mask in css
https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
*{
background-color:black;
}
section{
margin-top:3em;
display:flex;
flex-flow: column;
align-items: center;
}
.hexagon {
width: 100px;
height: 110px;
background: red;
position: relative;
display:inline-block;
margin:0.2em;
-webkit-mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
background-image: url('https://img1.ibxk.com.br/2017/07/13/13160112901226.jpg?w=700');
background-size: cover;
background-position: center;
}
.row{
text-align: center;
margin-top: -25px
}
<section>
<div class="row">
<div class="hexagon" id="hexagon1"></div>
<div class="hexagon" id="hexagon2"></div>
<div class="hexagon" id="hexagon3"></div>
<div class="hexagon" id="hexagon4"></div>
<div class="row">
<div class="hexagon" id="hexagon5"></div>
<div class="hexagon" id="hexagon6"></div>
<div class="hexagon" id="hexagon7"></div>
</div>
<div class="row">
<div class="hexagon" id="hexagon8"></div>
<div class="hexagon" id="hexagon9"></div>
</div>
</section>
I made this code
Codepen
I changed the way you draw the element, instead adding the border top with the color red, I added the sides with a background, but you'd need to know the background-color of the page to do that, so I put the image above the box and the before and after above the image
CSS
*{
background-color:black;
}
section{
margin-top:3em;
display:flex;
flex-flow: column;
align-items: center;
}
.hexagon {
width: 100px;
height: 110px;
background: red;
position: relative;
display:inline-block;
margin:0.2em;
overflow: hidden;
}
.hexagon img{
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
height: 100%;
transform: translate(-50%, -50%);
z-index: 1;
}
.hexagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-right: 50px solid black;
border-left: 50px solid black;
border-bottom: 25px solid transparent;
z-index: 2;
}
.hexagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-right: 50px solid black;
border-left: 50px solid black;
border-top: 25px solid transparent;
z-index: 2;
}
.row{
margin-top:1.3em;
}
.hexagon#hexagon2{
background-color: purple;
}
.hexagon#hexagon2:before{
border-bottom-color: purple;
}
.hexagon#hexagon2:after{
border-top-color: purple;
}
.hexagon#hexagon3{
background-color: white;
}
.hexagon#hexagon3:before{
border-bottom-color: white;
}
.hexagon#hexagon3:after{
border-top-color: white;
}
.hexagon#hexagon4{
background-color: orange;
}
.hexagon#hexagon4:before{
border-bottom-color: orange;
}
.hexagon#hexagon4:after{
border-top-color: orange;
}
How to transform block in CSS? Pseudo-elements is need or not? I try to create block look like block on the picture below. I can't create such block as on the picture below.
This is my code:
.transform_items {
width: 40%;
height: 80px;
position: relative;
margin: 0 auto;
perspective: 600px;
margin-top: 150px;
left: 50px;
}
.block,
.block::before{
display: block;
position: absolute;
margin: 0 auto;
}
.block {
border: 5px solid transparent;
width: 350px;
height: 60px;
}
.block::before {
content: '';
border: 5px solid #52B352;
transform: rotateY(30deg);
top: -5px;
right: -5px;
bottom: -5px;
left: -35px;
}
.block a {
font-size: 24px;
}
<div class="transform_items">
<div class="block"><a>Block</a></div>
</div>
The expected result:
If you can use SVG (1), it could be like this
codePen
svg #block {
stroke: orange;
fill: none;
stroke-width: 5
}
svg text {
font-size: 25px
}
<svg version="1.1" x="0px" y="0px" width="274px" height="84px" viewBox="0 0 274 84">
<polygon id="block" points="33,13 245,24 245,60 29,64 " />
<text x="100" y="50">BLOCK</text>
</svg>
You can also save the svg code as a .svg file,without the text element, and use it as background-image for the div that contains your text
Read this to learn how to use svg in different ways: https://css-tricks.com/using-svg/
(1) Browser support for SVG is a little better than browser support for transform, caniuse: SVG
I'm trying to design a profile image shape just like this
but my code given me the following design
I'm worried about the white space inside the border and the shape here is code
.doctor-profile-photo {
width: 210px;
height: 210px;
border-radius: 60px/140px;
border: 5px solid #000;
box-shadow: 0px 2px 5px #ccc;
}
.doctor-profile-photo img {
width: 100%;
height: 100%;
border-radius: 60px/140px;
}
<div class="doctor-profile-photo">
<img src="http://weknowyourdreams.com/images/bird/bird-09.jpg" alt="">
</div>
This gives pretty similar output to what you want. Try tweaking the values of border-radius and height-width to achieve exactly what you want.
<style>
#pic {
position: relative;
width: 130px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#pic:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
</style>
<div id="pic"></div>
Here's a useful link : https://css-tricks.com/examples/ShapesOfCSS/
SVg path and pattern
You can create your shape with a single path. I used a quadratic Bezier curve.
Path MDN
I added an image to the svg using a image tag and pattern tag.
This is then using inside the path with this fill="url(#img1)".
The defs tag is used to hide elements we are not using directly.
<svg viewBox="0 0 100 100" width="400px" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="400">
<image xlink:href="http://lorempixel.com/400/400/" x="0" y="0" width="100px" height="100px" />
</pattern>
</defs>
<path d="M15,15 Q 50,0 85,18 100,50 85,85 50,100 18,85 0,50 15,15Z" fill="url(#img1)" />
</svg>
Is there a way to create a border on hover for only edges of the div. Here is the basic layout of my grid created using bootstrap. here is my codepen http://codepen.io/anon/pen/zvxEYw
<div class="product-grid col-md-4">
<a class="preview" href="#">PREVIEW</a>
</div>
.product-grid{
margin:30px 0 0 30px;
border:1px solid #ccc;
height:300px;
display:block;
}
.product-grid:hover{
border:1px solid #000;
}
/* Preview */
.preview {
opacity: 0;
position: absolute;
left: 40px;
right: 40px;
top: 0;
height: 30px;
line-height: 32px;
background-color: #fe3;
text-align: center;
text-decoration: none;
color: #000;
transition: .2s;
}
.product-grid:hover .preview {
opacity: 1;
top: 80px;
}
For clear understand I have attached a sample image below
Achieving that kind of effect, is best possible if you use CSS3, and I've done it by using <svg> as:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<line class="top" x1="0" y1="0" x2="900" y2="0" />
<line class="left" x1="0" y1="460" x2="0" y2="-920" />
<line class="bottom" x1="300" y1="460" x2="-600" y2="460" />
<line class="right" x1="300" y1="0" x2="300" y2="1380" />
</svg>
Here look into my JSFiddle, Hope you're looking something like this.
And it will do the trick for you.
Further customization is no big deal, just look into its CSS and you can changes it as per your requirement.
Source: tympanus
please try this one sir:
#div1 {
position: relative;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid transparent;
}
#div2 {
position: absolute;
top: -2px;
left: -2px;
height: 84px;
width: 84px;
background-color: #FFF;
border-radius: 15px;
padding: 10px;
}
#div1:hover {
border: 1px solid red;
}
DEMO