Question

我尝试使用border-img创建这种类型的导航栏但是无法创建它。任何人都可以为它提供一些帮助或代码。

Answer 1

好的，我想我明白你的意思了。

我认为您应该有2个选项可用于倾斜的底部边框。

使用图片。因此，示例站点的整个顶部标题就是图像。

包括与facebook横幅成一定角度的黑色部分和白色底部。这张图片必须是png，因为它需要一个alpha图层。 PNG图像在文件大小中通常相对较大，这使得它不那么吸引人，但实现起来要简单得多。

使用CSS完成所有操作：

＆＃13;

class User extends Authenticatable{
use Notifiable;

const VERIFIED_USER = '1';
const UNVERIFIED_USER = '0';

const ADMIN_USER = '1';
const REGULAR_USER = '0';

protected $table = 'users';
protected $fillable = [
    'name',
    'email',
    'password',
    'verified',
    'verification_token',
    'admin',
];
 protected $hidden = [
    'password',
    'remember_token',
    'verification_token',
];
public function isVerified(){
    return $this->verified == User::VERIFIED_USER;
}
public function isAdmin(){
    return $this->admin == User::ADMIN_USER;
}
public static function generateVerificationCode(){
    return str_random(40);
}

＆＃13;

            html {
              height:100%;
            }
            body {
             height:100%;
             margin:0;padding:0;
            }
            h1,h2,p {
              color:white;
            }
            #header {
              /* Just the top banner */
              background-color:black;
              height:125px;
              text-align:left;
              padding-left:30px;
              color:white;
              font-size:50px;
              line-height:100px;
              -webkit-clip-path: polygon(0 0, 100% 0, 100% 75px, 0% 100%);
              clip-path: polygon(0 0, 100% 0, 100% 75px, 0% 100%);
            }
            #content {
              position:relative;
              top:-50px;
              height:calc(100% - 125px - 25px);
              min-height:350px;
              background:url(http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/dark_forest_wallpaper_landscape_nature_1138.jpg);
              background-attachment:fixed;
              background-sizing:100% 100%;
              padding:75px 75px 0 75px;
              -webkit-clip-path: polygon(0 70px, 100% 20px, 100% 100%, 0% 100%);
              clip-path: polygon(0 70px, 100% 20px, 100% 100%, 0% 100%);
            }
            .section {
              background-color:black;
              margin-top:-71px;
              padding:75px 75px 25px 75px;
              font-family:sans-serif;
            }
            .section > p {
              font-size:15px;
              padding:25px;
            }

＆＃13;

PS：我在StackOverflow上回答问题时学到了这一点，所以这对我来说也是新闻。

像魅力一样工作!!

如何在HTML中创建这种类型的导航栏

1 个答案: