Creating slanted lines using CSS / Bootstrap 3

I'm trying to create a webpage with slanted lines. Is it possible to set an angle of 20 degrees using three div elements?

Currently, I have one div for the logo at the center and another for the navigation bar. I want the navigation bar to align with the slanted line above it. I am working with Bootstrap 3 and feeling a bit confused. Any help and guidance would be greatly appreciated.

<div class="container" style="background-color: #04342E; width:100%">
            <img class="img-responsive center-block" style="height: 600px; align-items: center;"; src="/i/gp-logo.png" />
 <nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
                <ul class="nav navbar-nav" style="text-decoration: none">
                    <li class="nav-item">
                      <a class="nav-link active" href="#" style="color: white;">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Artwork</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Stationery</a>
                    </li>
                     <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Books</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">About Us</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#" style="color: white;">Contact</a>
                    </li>
                </ul>
            </nav>
            <div>   
        </div> 
      </div>
htmlcsstwitter-bootstrap-3

Answer №1

To achieve the desired effect, you can either create a div with clip-path. I recommend using the tool available at this link:

Alternatively, you can use a background with linear-gradient.

Here is a DEMO using clip-path:

body{
  background: #04342E;
  margin:0;
}
div.polygon{
  height: 100vh;
  width: 100vw;
  background: white;
  clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 75%);
  
  display:flex;
}

.content{
  height: 50%;
  width: 100%;
  background-color:rgba(255,0,0,0.3); /** Just used to show the written area But it should be removed **/
  margin:auto;
}
<div class="polygon">
  <div class="content">
   Lorem ipsum
  </div>
</div>

Answer №2

.container {
  background-color: #04342E;
  width: 100%;
  height: 500px;
  position: relative;
}

.container::after {
  position: absolute;
  content: "";
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-bottom: solid white 500px;
  transform-origin: bottom right;
  transform: skew(1000deg);
}

.container #content {
  background-color: #04342E;
  width: 100%;
  height: 500px;
  margin-top: 600px;
  position: relative;
}

.container #content::after {
  position: absolute;
  content: "";
  top: 0px;
  right: 0px;
  left: 0px;
  border-top: solid white 500px;
  transform-origin: top left;
  transform: skew(-1000deg);
}
<div class="container">
  <img class="img-responsive center-block" style="height: 100px; align-items: center;" ; src="./images/image 5.png" />
  <nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
    <ul class="nav navbar-nav" style="text-decoration: none">
      <li class="nav-item">
        <a class="nav-link active" href="#" style="color: white;">Accueil</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" style="color: white;">Tableaux</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" style="color: white;">Papeterie</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" style="color: white;">Book</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" style="color: white;">A propos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#" style="color: white;">Contact</a>
      </li>
    </ul>
  </nav>
  <div id="content">
  </div>
</div>

You have the ability to use pseudo classes in your css coding to achieve this effect. See the code snippets provided above for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with overflow-auto not displaying scroll bar

In my layout, I have a grid parent with two columns. The left child has a height equal to the parent (100vh), while the right child is 1000px tall, which exceeds the parent's height. Here is the HTML structure: <body> <div class="le ...

htmlcss

Alter the color of the dropdown background when it is changed

Currently, I am utilizing the Semantic UI React CSS library and find myself in need of changing the background color of dropdowns once an option is selected. https://i.sstatic.net/yZBK7.png to https://i.sstatic.net/LxTtT.png <Dropdown placeholder=&apo ...

javascripthtmlcssreactjssemantic-ui-react

How to eliminate padding between Bootstrap col-xx columns

When using Bootstrap's col-xx classes, the padding can sometimes result in wasted space on smaller screens. To address this, I have decided to remove the padding by nesting col-xx with specific CSS settings like shown below: <style> div[class^= ...

csstwitter-bootstrap

Implementing a permanent class following an incident

Is it possible to dynamically add a class to an element when an event occurs rather than based on a condition? For example, I have a td that displays a variable. <td>{{myVar}}</td>//myVar=10 When the variable changes to myVar=15, I want to ad ...

javascripthtmlangularjs

CSS for when the mouse hovers over an element

Two php files and a js file are involved in this scenario. The issue at hand is that when the div is clicked, it navigates to a new page with an appended # to the URL, causing it to scroll to the specified comment ID. However, instead of scrolling to the c ...

javascriptphpcsscursor

Is there a white outline on the Cordova Text Font?

Currently working on a Cordova app where I have encountered an issue with the text display. The problem lies in the white outline surrounding the text, which is not visually appealing. In my code, I have a div with the style attribute background-color: ye ...

csshtmlcordova

Utilizing CSS/HTML to optimize code for mobile applications

Looking for some help with implementing the Upcoming Events part from this code snippet: https://codepen.io/AbhijithHebbarK/pen/boKWKE .events-details-list{ opacity:0; transition: all 0.3s ease-in-out; position: absolute; left: 0; rig ...

htmlcssmobile

What steps can I take to properly center and repair my web page that is currently a mess

This web page I'm working on is giving me a headache. The #titlediv just won't center and the navbar keeps disappearing randomly. It seems like a big issue that I can't wrap my head around. If anyone out there can help salvage it, here' ...

htmlcsscentering

Having trouble with JavaScript in a project I'm trying to replicate

For my coding practice, I am working on a project where clicking on the images should change the main product displayed along with its color. However, nothing happens when I click on the products. Can anyone point out what I might be doing wrong? Here is ...

javascripthtmlcss

Expand a list item to full width based on the number of items present

Is there a way to make dynamically added list items in a footer stretch across the width of their container? The footer is created in WordPress and the list items are actually widgets. Here is an example: Fiddle I can't manually set the width for e ...

htmlcsswordpresslistwidget

Having trouble with redirecting a website to its appropriate version for mobile or desktop users?

After creating both the desktop and mobile versions of my website, I have a question. How can I determine whether a visitor is using a mobile phone or a PC when they come to my website? Specifically, if a visitor accesses my website through a mobile devic ...

csshtmlwindows-mobileuser-agent

What steps are involved in incorporating a machine learning algorithm from a Python file into a Django website?

I'm currently utilizing the random forest algorithm in Python to make predictions about college dropouts. The algorithm has been completed, and now I need to integrate the file into a website using Django. However, I am facing issues as the imported f ...

pythonhtmldjangocsvmachine-learning

"Safari is not displaying the element's height correctly when set to 100

I am facing an issue where I have a child div vertically centered under a parent div with a specific height. The child div is assigned the height:100% property, but it seems to be not working correctly on Safari only. To see more about this problem, you ca ...

cssmacossafariheight

I currently have two responsive menus and I'm trying to figure out how to modify the javascript so that when one menu is opened, the other

I am facing an issue with my responsive menus on a webpage, similar to the example provided in the jsfiddle link below. Currently, when one menu is open and I click on another, both remain open. How can I modify the JavaScript code so that when one menu op ...

javascriptjquerycssresponsive-design

Activate a click on a div element to enable smooth scrolling when using the page down and page up keys

Whenever I directly click on my div, the pageUp and pageDown keys scroll the contents of the div. But when I trigger a click programmatically, the scrolling with pageUp and pageDown stops working. How can I enable scrolling with pageUp and pageDown without ...

javascriptjqueryhtmlangularjs

Troubleshooting problems with text areas in Android when using JQueryMobile and PhoneGap

When viewing my textarea control, I noticed that it breaks away from the .css theme and displays two boxes - one themed and one not. This issue only occurs on my HTC Evo device, as the code works fine on the emulator. You can see a screenshot of this behav ...

jqueryhtmljquery-mobiletextarea

Move the cursor over the text to reveal an image

Hello, I'm trying to replicate the same animation effect as seen on these websites: and . Specifically, when hovering over the "selected works" section, an image is displayed. I suspect it's using a JavaScript library, but I can't seem to i ...

javascripthtmlcssanimation

Issues with the functionality of jQuery append and AngularJS ng-if not functioning

In my application using checkboxes, I control the visibility of charts with the ng-if directive and implement drag-and-drop functionality with angular-Dragula. The use of ng-if is essential for me as it allows me to manipulate visible div IDs and organize ...

javascriptjqueryhtmlangularjs

Conceal a div containing a specific class during the page's loading process, then reveal it once the

Is there a way to hide a specific div class while a page is loading? Here is the structure I am working with: <div id ="container"> <div class="project-item tv"></div> <div class="project-item radio"></div> <div class="pro ...

javascriptphpjqueryhtml

Calculate the combined total of two inputted values instantly

Is there a way to add two separate numerical inputs together in real-time and display the sum in a third variable? Here's a clearer explanation: First Variable: 100 (input) Second Variable: 150 (input) Sum: 250 (calculated, not input) Any suggesti ...

phpjqueryhtmlsumreal-time