Looking to replicate a design using CSS that requires editable background images via a CMS. The left image needs an angled/slanted right edge with a gold border, while the right image should be parallel. Content placement is not a concern at this stage.
View the demo: http://codepen.io/ifusion/pen/KNxNxL
How can this be achieved using CSS? Bootstrap has also been incorporated (as shown in the demo).
Consider implementing the skew property in your CSS.
Check out this demonstration:
.wrapper{
overflow:hidden;
}
.image_box {
width: 150px;
height: 100px;
margin: 0 0 0 -20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
overflow:hidden;
position:relative;
border-right:4px solid red
}
.picture{
background: url(http://placekitten.com/301/301);
position:absolute;
top:-30px;
left:-30px;
right:-30px;
bottom:-30px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
border-right:4px solid red
}
If you're looking to learn more about shaping a div, a quick Google search will provide you with plenty of resources.
This example is just a starting point and can be easily modified to suit your preferences.
/* reset */
ul, li, a {
margin: 0; padding: 0;
}
/* nav stuff */
ul, li, a {
display: inline-block;
text-align: center;
}
/* appearance styling */
ul {
/* hacks to make one side slant only */
overflow: hidden;
background: linear-gradient(to right, red, white, white, red);
}
li {
background-color: red;
transform:skewX(-20deg);
-ms-transform:skewX(-20deg);
-webkit-transform:skewX(-20deg);
}
li a {
padding: 3px 6px 3px 6px;
color: #ffffff;
text-decoration: none;
width: 80px;
transform:skewX(20deg);
-ms-transform:skewX(20deg);
-webkit-transform:skewX(20deg);
}<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
<br>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Three</a></li>
</ul>
<br>
<ul>
<li><a href="#">One</a></li>
</ul>I am currently utilizing Bootstrap and JQuery for my project. HTML <div> <ul> <li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li> </ul> </div&g ...
I have set up a database called pogoda with a city table containing columns for city and cityid. Using PHP, I am creating a dynamic list and submitting the chosen value into subsequent code. To ensure that the drop-down list has a default starting positio ...
I'm struggling with removing the CSS class btn-disabled from the input button element upon successful verification of a form entry. I have implemented a function called enableForm to remove the btn-disabled CSS class when reCAPTCHA is verified. Howe ...
I'm currently working on a project that involves creating a "Twitter" page. The idea is to utilize the JSON file available at to display some of its content. However, I'm facing an issue where my page only shows the table headers and nothing els ...
I'm encountering an issue while starting my angular js application. On a html page, I have divs with icons and I want the background color to change on mouse over. This is working using jquery's $(document).ready(function(){ approach. The conten ...
After extensive searching on S.O., I have been unable to find a solution that works flawlessly. The issue at hand involves a card component in a NextJs application that is encompassed within a <Link> tag. Additionally, there is another <Link> t ...
I have a table that I need to adjust the width of using JavaScript or jQuery. <div class="dataTables_scrollHeadInner" > <table class="table table-condensed table-bordered table-striped dataTable no-footer" > <thead ...
Just started using twitter-bootstrap and I'm trying to customize the navbar by removing borders and padding, adding a hover effect for links with a different background color, and setting margins of about 10px on the left and right. However, I'm ...
I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...
Currently, I am focused on improving my skills in JavaScript and HTML. In one of my projects, there is a text area where the user inputs a CSV format like this: 17845 hello bye 789 After input, I get 17845,hello,bye,789. Now, the challenge is t ...
I've been struggling for hours to find a way to make one DIV slide over another DIV below it instead of pushing it down. The setup is quite straightforward. I have a script that reveals more text when the 'Show More' button is clicked. Desp ...
Within my application, there is a string that represents a mathematical expression: String s = "log<small><sub>(log<small><sub>(log<small><sub>3<small><sup>2</sup></small></sub></small&g ...
I'm feeling lost trying to figure out what's wrong with this code snippet: <input #quantity type="number" matInput formControlName="quantity" (input)="onQuantity($event, i)" placeholder="Quantity"/> onQuantity(event: InputEvent, i: number ...
I'm currently working on integrating evoPDF into my asp.net application. When I click on a part of the HTML file, I send that portion using AJAX. So far, everything is working well up to this point. However, when I try to use the following methods fro ...
I'm currently using Material UI within a React application and I'm facing an issue where opening a dialog causes the body of my page to scroll to the top. This behavior also occurs when opening a Material Popover or a Material TextBox selector. D ...
I am experiencing an issue with the code on my server: <p>This is a test to determine why the <input type="text" style="text-align: center;" value="input"/> element appears on a new line when displayed on a wordpress page.</p> When view ...
I've been working on saving a file using the fileSystem API. It appears that the code below is functional. However, I am unable to locate where the saved file is stored. If it's on MacOS, shouldn't it be in this directory? /Users/USERNAM ...
I am attempting to add CSS styles to app.component.ts using the :host property, but I am not seeing the desired results. The CSS is being applied, but not correctly. .ts export class AppComponent { title = "Default Title" data = 'This is defaul ...
We are looking to extract dividend data specifically from the Nasdaq exchange similar to this Google Sheets example. While most other URLs work without any issues, the query for this one seems to be failing. <?php $ch = curl_init(); curl_setopt($ch, C ...
I am currently working on a project where I am trying to track my location using my smartphone and display it on a map. To achieve this, I am utilizing openlayers 2. However, I am encountering an issue. When I implement the code below in a Chrome Browser ...