Question

在我的网站上，我想添加一个剪辑路径，因此其中一个边是一个角度。这确实适用于我的页脚，但我无法在标题中使用它。该网站采用自己的主题制作。 header.php文件中的代码是：

<?php
/**
 * The header for our theme.
 *
 * This is the template that displays all of the <head> section and 
everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-
files/#template-partials
 *
 * @package epw_theme
 */

?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('style.css'); ?>">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>


<div class="hero">
<div class="fullwidthbar">

<h1 id="headertext"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" 
rel="home"><?php bloginfo( 'name' ); ?></a></h1>

</div>


<div class="hdftbg">
    <nav id="site-navigation" class="main-navigation" role="navigation">

        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' 
=> 'primary-menu' ) ); ?>
    </nav><!-- #site-navigation -->
</div>
</div>

<div id="header">


<div id="content" class="site-content">

</div>

与网站的这一部分相关的CSS：

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


body {
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.hero {
  margin: 0 auto;
  padding-top: 0px;
  width: 100%;
}

.hero h1  {
  margin-top: 0;
}

// slanted edge here
.hero .hdftbg {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
}

// demo code below
.hero {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  position: relative;
  text-align: center;
  text-shadow: 0px 0px 1px rgba(0,0,0,0.5);}


  .hdftbg{
    height: 40px;
    width: 50%;
    background-color: #1D1F20;
    float: right;
  }

    .fullwidthbar{
    width: 100%;
    background-color: #1D1F20;
    height: 25px;
    margin-bottom: -1px;
  }

  #headertext {
    font-size: 18px;
    text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: white;
  }

  #headerfield {
    font-size: 14px;
    font-weight: 300;
    margin-top: 0.5em;
}

剪辑路径多边形不在标题中工作，但在页脚中工作

0 个答案: