Is there a way to create a trapezium using CSS/Html/Canvas? I have attempted to do so, but my current method is messy and not practical.
div {
width:0;
margin-left:-1000px;
height:100px;
border-right:1000px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-left:1000px;
white-space:no-wrap;
}
Here is the link to my jsFiddle for reference:
I have found a solution by wrapping the content in 2 extra divs.
Here is the CSS code:
.trapezium {
position: absolute;
left: 40px;
top: 40px;
width: 300px;
height: 200px;
-webkit-transform: skewY(6deg);
overflow: hidden;
}
.trapezium > div {
background-color: yellow;
position: absolute;
left: 0px;
top: 50px;
width: 300px;
height: 200px;
-webkit-transform: skewY(-12deg);
overflow: hidden;
}
.trapezium > div > div {
font-size: 60px;
background-color: yellow;
position: absolute;
left: 0px;
top: -30px;
width: 300px;
height: 200px;
-webkit-transform: skewY(6deg);
overflow: hidden;
}
View the demo here.
Could a solution like this be what you're looking for? Take a look at this fiddle: jsfiddle.net/WWYYM/3/ . Please let me know if it meets your needs. I made some adjustments to your code as shown below:
div {
border-bottom: 100px solid lightblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 500px;
white-space:no-wrap;
text-align:center;
}
I am unsure about your needs, but this information might be slightly helpful to you.
section {
width:0;
margin-right:-100px;
height:100px;
border-left:100px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-right:100px;
white-space:no-wrap;
}
You can achieve a similar transformation with the following code snippet:
div {
width: 0;
margin-left: -50px;
margin-top: -500px;
height: 100px;
border-right: 100px solid lightblue;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
padding-left: 1000px;
white-space: nowrap;
transform: rotate(20deg);
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(90deg);
}I currently have a bootstrap navbar set up like this: <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header nav-tabs" style=" ...
Within the given code snippet, the function attrSetting is invoked. However, when I modify it to {"name":"A", "index":"0", "cellattr":attrSetting}, the code executes smoothly. But here lies the issue - cellattr interprets it as a string rather than a fun ...
I am currently in the process of developing a system using React, and as someone new to the framework, I have encountered an issue. I need to include a JavaScript file in my index.html that is located within the src folder. This js file is essential for th ...
When a client connects to a Node Express server, it creates a new EventSource. The server sends an SSE event upon initial connection and then at a 30-second interval thereafter. Strangely, the client's onmessage handler does not respond to the initial ...
How can I ensure that my tracking code runs when a user clicks a button in my React project, even if they open it in a new tab? Is there a solution for this in React JS? Here's a simple example: var Hello = React.createClass({ render: function( ...
I have a chat feature integrated into my application. I am looking to dynamically resize an image within the chat window when the width of the window falls below a certain threshold. Is there a method available to modify the CSS style or class based on the ...
I have been trying to showcase a logo (PNG created in Paint.NET) on my website (XHTML 1.0 Transitional), using the following code: <body> <div class="header"> <div class="logo"> <img src="logo.png" /> </div> ...
When attempting to apply !important to the fill property of an SVG file, I'm encountering issues with the syntax. Despite my efforts, the !important directive is not being correctly applied to the fill property, resulting in the circle element renderi ...
I have 2 text boxes that accept dates from a calendar control. One is for the "From" date and the other is for the "To" date. Here's how I would like the dates to be handled: For the first text box (From), it should only allow today's date or an ...
I have a basic React component that looks like this: interface ComponentProperties { onClick?: () => void; } const CustomComponent = (properties: ComponentProperties) => { if (!properties.onClick) { return <></>; } ...
I need to transfer an object from the view page to the controller. Ajax code:-- var jsdata = '{p:' + data + '}'; $.ajax({ type: "POST", url: rootURL + "Deal/Check", contentType: 'application/json; charset=utf-8', da ...
Can you explain the distinction between blocks and include in Jade template creation? How do you determine when to use each one? ...
Upon receiving advice from the following inquiry Multiple forms in a page - loading error messages via ajax, I am endeavoring to incorporate multiple forms within one page. The goal is to insert error messages into the corresponding input div classes. I pr ...
I am looking to create a custom time duration component by modifying the TextField component. https://i.stack.imgur.com/fLsFs.png https://i.stack.imgur.com/SdpdH.png If anyone has any advice or assistance, it would be greatly appreciated. Thank you! ...
I am attempting to show and hide data that is loaded using Ajax. $.ajax({ type: "POST", url: "/swip.php", data: {pid:sldnxtpst,sldnu:sldnu}, success: function(result) { $('.swip').prepend(result); } }); This data gets ...
Snippet: let data = JSON.parse('{"name":"dibya","company":"wipro"}'); Error Message : An error occurred while trying to parse the JSON data. The console displays "Uncaught SyntaxError: Unexpected end of JSON input" at line 1, character 6. ...
As a budding Web Designer, I am eager to absorb the most efficient techniques utilized in the world of web design. Can anyone recommend some tutorials for mastering the creation of innovative websites using Photoshop, CSS, HTML, and more? ...
I am currently working with a Highcharts chart that includes multiple tabs allowing users to display different data on the graph. I am dynamically adding series for each of these data points, which has been functioning well. However, I have encountered an ...
I received an API response from a store in JSON format containing three records at the first level. The structure of the response includes data, error_no, msg fields. Within the data field at the second level, I have data.items, data.total_pages, data.to ...
Even with magic_quotes_gpc = off on the server, the data I send via jQuery Ajax is still being escaped. When getting data directly from $_POST without using ajax, everything works fine and the data remains unescaped. However, when sending data through aja ...