Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
Like Tree1Likes
  • 1 Post By Ronald Roe

Thread: Need help with making angles in CSS

  1. #1
    Junior Member
    Join Date
    Jan 2016
    Posts
    1
    Member #
    52984

    Need help with making angles in CSS

    Hi guys. I'm working on a website for my youtube channel and part of the design uses angles for the navbar. I'm a noob when it comes to web design so i used images for my navbar, because i did this the navbar and header wont resize when the browser is smaller than 1920. Do you guys know how I can make angles for my navbar or if theres anyway i could possibly resize the images with the size of the screen or browser? Thanks!

    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    There is a way to do this via CSS only. It's a little more advanced, but you can do it if you pay attention.

    First, I'm going to just explain what you're going to do, then I'm going to direct you to where you can find an example.

    You're going to basically use pseudo-elements, shape them using a hack and push them into place. How you do that: If you're not familiar with pseudo-elements, here's a primer: https://css-tricks.com/almanac/selec...er-and-before/

    So, you'll want to set the menu's main element (usually a nav element) to a position value other than static. This will allow you to absolutely position the pseudo-elements within it. Then, using offsets, you'll push them into place. Next, there's a hack to make triangles here: https://css-tricks.com/examples/ShapesOfCSS/. Use that combined with border-radius to get the shape you want. It sounds more intimidating than it actually is.

    I've done almost exactly this on my website's nav. Click on the link to my site in my signature and use your browser's dev tools to look at how it's done. You can usually access those tools with the F12 key. In Chrome, if you right click the tab on the navigation, then take a look at the <a> element in the tab, you'll see there is a ::before and ::after element inside it. Take a look at those items' CSS to see how it is done.
    satindertech likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:30 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com