Posted paper css3

0 votes

I'm attempting to make a posted paper in pure CSS3 that has box-shadow and transitions. I've so far completed a paper with shadows on both sides, but I want to change the appearance to something like this:enter image description here

Is that even possible without images?

.shadow {
  width: 150px;
  height: 150px;
  background-color: yellow;
  position: relative;
}
.shadow:after {
  position: absolute;
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}
<div class="shadow">
  edit this even further
</div>
Aug 22, 2022 in CSS by Edureka
• 13,620 points
414 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
1 answer

CSS to set A4 paper size

I looked into it further, and the ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
18,844 views
0 votes
0 answers

Looping Animation of text color change using CSS3

I have text that I want to ...READ MORE

Jun 22, 2022 in CSS by Edureka
• 13,620 points
1,067 views
0 votes
0 answers

CSS3 Rotate Animation

<img class="image" src="" alt="" width="120" height="120"> Cannot get ...READ MORE

Jun 22, 2022 in CSS by Edureka
• 13,620 points
445 views
0 votes
0 answers

background-size in shorthand background property (CSS3)

I'm trying to mix background-image and background-size properties in a shorthanded background property. ...READ MORE

Jul 6, 2022 in CSS by Edureka
• 13,620 points
704 views
0 votes
0 answers

CSS3 selector :first-of-type with class name?

Is it possible to choose the first ...READ MORE

Aug 17, 2022 in CSS by Edureka
• 13,620 points
270 views
0 votes
0 answers

css3 drop shadow under another div, z-index not working

To make it appear as though one ...READ MORE

Aug 18, 2022 in CSS by Edureka
• 13,620 points
803 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28, 2022 in CSS by Edureka
• 12,690 points
1,132 views
0 votes
1 answer

html/css hexagon with image inside

The CSS3 clip-path feature is a novel ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
1,834 views
0 votes
0 answers

How can I create a round arrow with only HTML and CSS?

Using CSS and HTML, I'm attempting to ...READ MORE

Jul 8, 2022 in CSS by Edureka
• 13,620 points
1,016 views
0 votes
0 answers

how to draw a rectangle in HTML or CSS?

I am trying to draw a rectangle ...READ MORE

Aug 18, 2022 in CSS by Edureka
• 13,620 points
855 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP