问题描述
我找不到正确的CSS制作方法。
我需要这种设计，但我无法使其具有响应能力。
当屏幕宽度改变时，倾斜的元素也会移动，但是我需要它的右边缘与矩形的左边缘处于同一位置。
我的代码： HTML
/**TESTING*/
add_action( 'woocommerce_before_add_to_cart_quantity','bbloomer_display_dropdown_variation_add_cart' );
function bbloomer_display_dropdown_variation_add_cart() {
// global $product;
global $post;
if( function_exists('get_product') ){
$product = get_product( $post->ID );
if( $product->is_type( 'grouped' ) ){
// if ( $product->is_type('variable') ) {
?>
<script>
jQuery(document).ready(function($) {
$('input.variation_id').change( function(){
if( '' != $('input.variation_id').val() ) {
var var_id = $('input.variation_id').val();
alert('You just selected child #' + var_id);
}
});
});
</script>
<?PHP
}
}
}
CSS：
<body>
<div class="wrapper">
<div class="subtract" style="background-color: red;"></div>
<div class="rectangle" style="background-color: red;"></div>
</div>
<div class="wrapper">
<div class="subtract" style="background-color: aqua;"></div>
<div class="rectangle" style="background-color: aqua;"></div>
</div>
</body>
我该怎么办？谢谢！
解决方法
具有更少代码的剪切路径解决方案：
.wrapper {
height: 300px;
background:aqua;
clip-path:polygon(0 0,100% 0,100% 100%,30% 100%,0% calc(100% - 100px));
}
.wrapper::before {
content:"";
display:block;
height:100px;
background:red;
clip-path:inherit;
}<div class="wrapper"></div>