Как вырезать цвет фона в правом нижнем углу текста - PullRequest
Новая
       26

Как вырезать цвет фона в правом нижнем углу текста

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

У меня проблемы с обрезкой цвета фона в правом нижнем углу текста. есть кто-нибудь, кто может мне помочь? Мне удается сделать это в Javascript, но из-за проблемы span в каждом слове мой босс не принял мое решение, так что я надеюсь, что есть кто-то, кто может помочь в css без javascript или если есть необходимость в javascript для таргетинга на id, а не на span, потому что в sitecore они решить, хотят ли они выбрать h1, h2, h3 и так далее. Вот ссылка: 

#bigHeadline,
#smallHeadline{
  display: inline;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    float: left;
}

#bigHeadline{
  -webkit-padding-end: 5%;
    -moz-padding-end: 5%;
    padding-inline-end: 5%;
    font-size: 46px;
    line-height: 58px;
    padding: 0 15px;
    float: left;
    font-weight: 200;
    margin: 0;
    text-transform: uppercase;
    color: #fff;
    width: 630px;
    background-color: rgba(0,0,0,.7);
    font-family: Roboto; 
    font-weight: 200;
  
}
#smallHeadline{
      padding: 0 15px;
    margin: 0;
    background-color: rgba(0,0,0,.7);
    font-family: Roboto;
    font-size: 22px;
    line-height: 33px;
    color: #fff;
    text-transform: uppercase;
    font-family: Roboto;
    font-weight: 200;
  
}
 <!DOCTYPE html>
    <html>
    <head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>

    <div class="c-imagebox-headlines">
      <div class="c-imagebox-headlines-tm-35">
        <h3 id="smallHeadline">Headline 1</h3>
        <br> 
        
        <h1 id="bigHeadline">Once upon a time in the west and east </h1>
        <br> 
        <h2 id="smallHeadline">SAVE <span class="service-texts">Kroner</span>&nbsp;<span>100,-</span> if you book online.</h2>
        </div>
    </div>
      
      
      </body>
    </html>

Я пробовал другое решение для отключения javascript и использования с clip-path, border-radius, но у меня действительно есть трудности с нацеливанием на нижнюю правую область, пожалуйста, помогите мне. Красный цвет - это область, которую я хочу обрезать.

enter image description here

1 Ответ

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

Это не простая проблема, потому что вы должны разработать синтаксический анализатор, который правильно обрезает вашу строку с <br/> (без выреза ни слова, или ставит <br/> перед запятой / точкой / любым символом),Вы должны получить ширину родительского контейнера .c-imagebox-headlines-tm-35, а затем вычислить максимальное количество слов в соответствии с размером шрифта h1 и сделать наилучшее приближение количества слов и размера шрифта.Это трудное решение для глупой проблемы.

Может быть, вы можете попробовать эту тему Авторазмер текста, чтобы соответствовать контейнеру

...