Menu
function readURL(event){
var getImagePath = URL.createObjectURL(event.target.files[0]);
$('#trapezoid').css('background-image', 'url(' + getImagePath + ')');
}#clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
#trapezoid {
border-bottom: 30px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 80px;
width:35px;
-webkit-transform: rotate(93deg);
-moz-transform: rotate(93deg);
-o-transform: rotate6(93deg);
-ms-transform: rotate(93deg);
transform: rotate(93deg);
float="left";
display="inline-block"
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
<div id="trapezoid">
</div>
</body>
</html>I have this snippet, What I want is when any user uploads any photo then red colored part should get replaced by the uploaded photo instead of whole area.
Please help me how to implement it.
795
You can use perspective, transform, transform-origin, as demonstrated by @Ana at Matrix 3d transform for obtaining trapezoid?
function readURL(event) {
var getImagePath = URL.createObjectURL(event.target.files[0]);
$("#trapezoid").css("background", "url(" + getImagePath + ")")
}.doors {
margin: 7em auto;
width: 16em;
height: 16em;
perspective: 10em;
position: absolute;
top: -50px;
}
#trapezoid {
display: inline-block;
width: 50%;
height: 100%;
background: red;
}
.doors #trapezoid {
transform-origin: 0 50% 0;
transform: rotateY(93deg);
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
<div class="doors">
<div id="trapezoid">
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
