Photoshop Question posted in
The official user guide can be found here.

Is it possible to make this image in CSS? – Photoshop

I was working on something in photoshop. You can see the picture here:
image

The three triangles in the background refer to 3 different pages on my website. I was wondering if it was possible to put the images like this in CSS because I want them to work like links and put some simple zoom animation on it when you hover on it. I’m actually pretty noob and new to CSS in overall so this will be hard to make without doing a lot of research but I hope you guys can help me out and give me a way to start. Any help is appreciated, thanks a lot!

just to be clear, the 3 triangles should become 3 individual pictures. I’m forced to work with flexbox on school if that matters. Thanks again.

Tags:

4

Answers


  1. 0

    You can convert the image (or single elements) in base64 with a tool like this: https://www.base64-image.de/

    enter image description here

    It is one of the oldest ways to encode things into html (first proposed in 1987!). It is a way of turning different types of data into a series of letters and numbers that is safe for HTML. One of those data types is images.

    I can’t paste a sample code here because it’s too long.

    Login or Signup to reply.
  2. 0

    You can create a div container which will contain the image of the background background and then you just add div you position inside thanks to the position: absolute; using the top, bottom, right, left.
    Like this :

    .container {
  background-image:url("https://i.stack.imgur.com/8bUXt.png");
  width:500px;
  height:500px;
   }
.triangle1 {
  position:absolute;
  top:0px;
  left:0px;
}
.triangle2 {
  position:absolute;
  top:100px;
  left:50px;
}
.triangle3 {
  position:absolute;
  top:300px;
  left:300px;
}
    <div class="container">
  <div class="triangle1">
      <img src="https://alexanderssteak.com/wp-content/uploads/2016/05/starfav.png" alt="">
  </div>
  <div class="triangle2">
      <img src="https://alexanderssteak.com/wp-content/uploads/2016/05/starfav.png" alt="">
  </div>
  <div class="triangle3">
      <img src="https://alexanderssteak.com/wp-content/uploads/2016/05/starfav.png" alt="">
  </div>
  
</div>
    Login or Signup to reply.
  3. 0

    So here is a rough draft of how I would create this in CSS. Basically I made three squares (.triangle to .triangle3), gave them a rotation (transform: rotate(45deg);) and added a gradient with a transparency (background-image: linear-gradient( to top left, red, transparent 50%);) to each of the squares. This creates the basic triangular shape, as the other halves of the squares are hidden if they are big enough to go over the viewport. I positioned the elements next to each other by using position: absolute;.

    I did not use flexbox however, but I don’t think flexbox would be the right thing to use in this case.

    Another thing to point out: If you don’t want the 45° angles you can also use transform:skew. It skews the element and gives you the possibility to create different angles. This is a good resource for this.

    body {
  background: black;
  position: relative;
  width: 475px;
}

.triangle {
  height: 200px;
  width: 200px;
  transform: rotate(135deg);
  background-image: linear-gradient(rgba(0, 255, 0, 1), rgba(0, 255, 0, 0));
  position: absolute;
  left: 0;
  margin-top: 30%;
}

.triangle2 {
  height: 200px;
  width: 200px;
  transform: rotate(-135deg);
  background-image: linear-gradient(rgba(0, 0, 255, 1), rgba(0, 0, 255, 0));
  position: absolute;
  right: 0;
  margin-top: 30%;
}

.triangle3 {
  height: 200px;
  width: 200px;
  transform: rotate(45deg);
  background-image: linear-gradient( to top left, red, transparent 50%);
  position: absolute;
  right: 0;
  left: 0;
  margin: 0% auto;
}

.wrapper {
overflow: hidden;
}
    <div class="triangle"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
    Login or Signup to reply.
  4. 0

    You can play with gradient, shadow and mix-blend-mode , but the best and most efficient is SVG.
    example to start with if you feel like spending hours drawing your shapes .

    .img {
  float:left;
  background:
    radial-gradient(circle at bottom center, transparent 20%, black 90%),
    linear-gradient( 50deg, rgba(125, 60, 213, 0.7) 32%, transparent 32.5% ),
    linear-gradient(-50deg, rgba(0, 108, 179, 0.7) 32%, transparent 32.5%) #000;
  min-width:400px;
}
.img:before {/* to keep ratio*/
  content:'';
  float:left;
  padding-top:66.66%;
}
.img:after {/* to draw stars spots */
  content:'';
  display:block;
  height:2px;
  width:2px;
  border-radius:50%;
  box-shadow: 50px 10px 1px  white, 55px 11px 1px  white, 45px 12px 1px  white, 40px 25px 1px  white;
}
.moon {
  float:left;
  margin:10% 1%;
  width:9%;
  padding-top:9%;
  box-shadow:0.30em 0.30em 0 0.25em gold ;
  border-radius:50%;
}
.star {
  position:relative;
  float:left;
  width: 2.5%;
  padding-top:1.25%;
  margin:3em;
  transform:rotate(-20deg);
}
.star:before , .star:after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  background:linear-gradient(45deg, rgb(247, 237, 135),gold);
  height:100%;
  width:100%;
  transform:skew(50deg) rotate(10deg)
}
.star:after {  
  transform:skew(-50deg) rotate(50deg)
}
    <div class="img">
  <b class="moon"></b>
  <b class="star"></b>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search