Css- верхний левый сложенный эффект - PullRequest
0 голосов
/ 30 октября 2018

У меня есть контейнер со сложенным эффектом в верхнем левом углу, но я не могу скрыть верхний левый фон. Может кто-нибудь помочь, пожалуйста?

.container {
  position: relative;
  border: 2px solid blue;
  background-color: #FFF;
  color: #252525;
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 20px;
  padding: 16px;
  overflow: hidden;
}

.container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 20px solid blue;
  border-left: 20px solid transparent;
}

.container:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-right: 20px solid blue;
}
<div class="container">
  Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we
  give rest half. Painful so he an comfort is manners. You vexed shy mirth now noise. Talked him people valley add use her depend letter. Allowance too applauded now way something recommend. Mrs age men and trees jokes fancy. Gay pretended engrossed eagerness
  continued ten. Admitting day him contained unfeeling attention mrs out.
</div>

Ответы [ 3 ]

0 голосов
/ 30 октября 2018

Чтобы убедиться, что я рекомендую вам внести некоторые изменения:

В правилах .container удалите overflow: hidden, так как это, по-видимому, не оказывает визуального влияния на результат (при условии, что свойство heigh остается auto - поскольку <div> значение по умолчанию равно auto).

И вам нужно только ::before (удалить ::afeter), но установить -2px в свойствах top и left и установить white в border-left цвет вместо прозрачного.

это будет выглядеть примерно так:

.container{
  position:relative;   
  border: 2px solid blue;
  background-color: #FFF;
  color: #252525;
  font-size: 14px;
  line-height: 21px;
  margin-bottom:20px;
  padding:16px;
}

.container:before{
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;       
    border-bottom: 20px solid blue;
    border-left: 20px solid white; 
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
     <div class="container">
       Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we give rest half. Painful so he an comfort is manners. 

        You vexed shy mirth now noise. Talked him people valley add use her depend letter. Allowance too applauded now way something recommend. Mrs age men and trees jokes fancy. Gay pretended engrossed eagerness continued ten. Admitting day him contained unfeeling attention mrs out. 
     </div>
  </body>

</html>
0 голосов
/ 30 октября 2018

Вот идея, учитывающая только контейнер и некоторый градиент в качестве границы и фона:

.container {
  font-size: 14px;
  line-height: 21px;
  border: 2px solid blue;
  border-image:linear-gradient(135deg, transparent 16px, blue 16px) 2; 
  background:
    linear-gradient(to bottom right,transparent calc(50% - 1px),blue calc(50% - 1px)) top left/20px 20px no-repeat;
  padding: 16px;
}
<div class="container">
  Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we
  give rest half. Painful so he an comfort is manners. You vexed shy mirth now noise. Talked him people valley add use her depend letter. Allowance too applauded now way something recommend. Mrs age men and trees jokes fancy. Gay pretended engrossed eagerness
  continued ten. Admitting day him contained unfeeling attention mrs out.
</div>
0 голосов
/ 30 октября 2018

удаляет фон верхнего угла

.container{

  position:relative;   
    border: 2px solid blue;
    background-color: #FFF;
    color: #252525;
    font-size: 14px;
    line-height: 21px;
    margin-bottom:20px;
    padding:16px;
    overflow: hidden;
}

.container:before{
        content: "";
        position: absolute;
        top: 0;
        background:transparent;/* this is the new line, background transparent is the same as "removing" it */
        left: 0;       
        border-bottom: 20px solid blue;
        border-left: 20px solid transparent; 
}

.container:after{
    content: "";
        position: absolute;
        top: 0;
        left: 0;   
        width: 0px;
        height: 0px;
        border-top: 20px solid transparent;
        border-right: 20px solid blue;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...