Can this specific shape be created using just one HTML element?
I am looking to use it for image cropping purposes, so having only one element would make the process easier
Can this specific shape be created using just one HTML element?
I am looking to use it for image cropping purposes, so having only one element would make the process easier
Can you create this shape using just one element?
YES
div {
width: 80px;
height: 140px;
background: red;
position: relative;
}
div:before,
div:after {
content: "";
display: block;
width: 110%;
height: 60px;
background: white;
position: absolute;
left: -14px;
}
div:before {
transform: rotate(-20deg);
top: -40px;
}
div:after {
transform: rotate(20deg);
bottom: -40px;
}<div></div>Note: You may need to make some adjustments to achieve your desired result, but the concept is there.
Would I recommend using this for cropping? No. In order to create this shape, the :before and :after elements are white (the background color), so it would only be effective with a simple background. It's feasible but not ideal.
If you want to create a solid color background, consider using borders on pseudo elements for a creative effect.
Here's a quick demonstration:
div {
background:url(http://lorempixel.com/300/300);
height:300px;
width:300px;
position:relative;
}
div:before, div:after {
content:"";
position:absolute;
left:0;
}
div:before{
top:0;
border-right:300px solid transparent;
border-top:100px solid white;
}
div:after{
bottom:0;
border-right:300px solid transparent;
border-bottom:50px solid white;
}<div>
</div>Another option is to utilize perspective and rotation techniques (prefixing may be necessary):
div{
width:200px;
height:200px;
transform:perspective(300px) rotateY(-20deg);
margin-top:50px;
overflow:hidden;
}<div>
<img src="http://lorempixel.com/300/300"/>
</div>Additional alternatives to explore:
I'm currently in the process of building a website, but when I try to render an ejs file (index.ejs), only the HTML portion is displayed without showing any stylesheets, fonts, or images. Here is the code snippet for linking the stylesheets: <!D ...
Having some CSS classes that smoothly slide my ng-view left and right during route change, everything was working well on most browsers and phones until now. Under ios 9, the animation is not functioning properly. Instead of sliding left to right, the view ...
My website features a vertical side menu with approximately 20 items. The issue I am facing is that when a user clicks on an item, the destination loads but the side menu must be manually scrolled to find the active item if it's located at the bottom ...
After creating a basic PHP webpage using Dream Weaver CS5 Version 11.0 Build 4964, I encountered an issue. My webpage is structured with a table containing 10 rows, each row consisting of a single cell. Within each table cell, there is a nested table tha ...
Can anyone help me figure out how to update a webpage so it functions as a report that multiple people can contribute to? I'm using forms to collect data and want it to instantly display under the correct category headings. Currently, I'm using j ...
Looking for a solution to activate hover state on both the box and text when rolling over tiled images with text underneath. Check out this example in the Fiddle: http://jsfiddle.net/techydude/GF8tS/ Any suggestions on how I can achieve this effect? ...
public function getCrew(){ $search = $this->input->post('name'); if($this->input->post('ajax') && (!empty($search))){ $result = $this->model->getNames($search); foreach($result as $r){ ...
After successfully embedding the Dialogflow messenger in my website, I noticed that in mobile view, the chat icon is blocking the bottom navigation bar. You can refer to the screenshot here. Is there a way to reposition the chat icon higher on the page? I ...
I have implemented a custom Segoe UI font in my CSS file. While it displays correctly in Chrome, I am facing an issue where IE and Firefox are showing the default font in certain areas. Below is the snippet of the CSS code: body { margin:0px auto; ...
I am currently working on coding a local file on my tablet and I need the Facebook widget to display correctly. However, it appears that the widget is not showing up when viewed from a local file. Is there any way to make it work in this situation? Here i ...
Something strange is happening in Firefox, it seems like the debug console is not telling the truth or there's something I'm not seeing. Here's the CSS for the body tag: html, body { width: 100%; } body { padding: 5% 10% 0 10%; ...
I am facing an issue where my JavaScript code works perfectly in JSFiddle, but when I copy it into an HTML file, it doesn't function as expected. Despite searching through other related posts, I have been unable to find a solution for this specific pr ...
<select data-ng-init="selectedItem='previewWidth = 1920; previewHeight = 1080'" data-ng-model="selectedItem" data-ng-change="GetNewData(); {{selectedItem}}"> <option value="previewWidth = 1920; previe ...
I'm currently working with a table from Ant Design, but I'm facing an issue where the padding or margin applied by the Ant Design CSS is preventing the table from expanding on the left side. The table has an inline CSS of table layout: auto which ...
After implementing the code, here is the current output: <table><tr> <td><div id="adt"></div></td> <!-- 336x280 ad code --> <td id="butw"><div id="butto">Follow @Twitter</div></td> ...
I have an image that is included in all text fields and drop downs like so: However, when it comes to a multiple select drop down box, the image appears differently: I would like the image to display as shown above for multiple select drop downs. I atte ...
On my webpage, when a user clicks on a navigation link, instead of changing to a new page, the content from the linked pages loads into a div on the main page using JQuery and .load function. Both tests worked perfectly with this implementation. Now, I wa ...
Despite reading numerous blogs and conducting extensive searches on Google, I am still unable to resolve the CSS issue related to Angular material below. Your assistance in fixing this problem would be greatly appreciated. Desktop view: https://i.stack.im ...
Is there a way to clean up this markup using jQuery? <span style="font-size:19px"> <span style="font-size:20px"> <span style="font-size:21px"> Something </span> </span> </span> I'm looking to tra ...
Here's a simple case to reproduce the issue: <div style="display: inline-block; position: relative; border: 1px solid black;"> short <div style="display: flex; position: absolute; border: 1px solid black; top: 100%; lef ...